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 13 2022
Table of contents:
jQuery Lazy Loading Plugins:
Uses jQuery Lazy Scroll Loading Plugin to only load html element (image, text, div, etc...) when it's visible in the viewport.
lazyload-any is a jQuery lazy loader which has the ability to delay the loading of any html contents (for example images, iframes, overflow contents) until they come into view.
A minimal jQuery plugin designed for high performance website that has the ability to delay the loading of your images until you start scrolling down the page as well as the images are scrolled into viewport, so you can save bandwidth and server requests.
lazyload is such a jQuery plugin inspired by YUI ImageLoader that delays loading of many large images in long web pages to reduce the load time.
A simple-to-use jQuery plugin that helps you quickly embed Youtube videos into your webpages with lazy load support.
Vanilla JS Lazy Loading Plugins:
Vimeo LazyLoad is the sibling project of the Youtube LazyLoad that load Vimeo video player on-demand when the user clicks on the play button & thumbnail image.
Yet another Youtube lazy loader that delays the loading of Youtube video player to improve the performance of your web page.
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.
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.