What is Lazy Loading
Lazy Loading a modern web technology to speed up your web app, improve user experience and boost search engine rankings.
The Lazy Loading web technology has the ability to defer the loading of images or other DOM elements (e.g. iframes, videos, Google Maps, Youtube players, scripts, stylesheets, etc) when they come into view when scrolling through the page.
What is Native Lazy Loading
Google will introduce the native lazy loading feature in the next browser version (Chrome 75+).
The new loading attribute which brings native <img> and <iframe> lazy-loading to the web:
<img src="jqueryscript.jpg" loading="lazy" alt="..." />
However, you may still need a third-party tool to achieve this feature for those who are using other browsers or legacy browsers.
The Best Lazy Loading Plugins:
Originally Published Nov 28 2017, updated Jan 18 2024
Table of contents:
jQuery Lazy Loading Plugins:
A useful and lightweight jQuery plugin for delaying loading of large images in long web pages for reducing the page loading time to improve user experiences.
A simple jQuery-powered lazy loader that allows you to defer loading images, background images, and external pages until they are scrolled into view.
A simple, lightweight yet powerful jQuery plugin that provides image lazy load functionality on your web page
A cross-browser jQuery plugin that loads specified images after the page load itself and speeds up your loading time through this. Images outside of the visible area will only get loaded when the user scrolls to them. This will not only increase the page loading speed, it will even decrease your traffic.
Vanilla JS Lazy Loading Plugins:
lazysizes is an easy yet robust JS library used to delay the loading of images (iframes, scripts, etc) until they come into view, as well as loading the appropriate sources according to the breakpoints defined in the markup to fit any screen size.
An SEO-friendly and framework-agnostic lazy loading library that displays a blurry image placeholder until the original image is completely loaded.
A small script to progressively load images with a blur effect. The script will show your low res image with a progressive blur until the high res image has been loaded entirely.