10 Best Lazy Loading JavaScript and jQuery Plugins (2019 Update)

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.

Thanks to the IntersectionObserver API, implementing the Lazy Loading on your web app is a simple task via a little bit of JavaScript. But now there is an easier way: Native Lazy Loading.

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:

In this post you will find the 10 best jQuery and Vanilla JavaScript lazy loading plugins to achieve the lazy loading functionality on your cross-browser and cross-platform web apps. I hope you like it.

Originally Published Nov 28 2017, updated June 6 2019

Table of contents:

jQuery Lazy Loading Plugins:

jQuery Plugin To Smartly Load Images While Scrolling - loadScroll

loadScroll is a minimal jQuery plugin to delay the loading of your images until you start scrolling down the page as well as the images are scrolled into viewport.

jQuery Plugin To Smartly Load Images While Scrolling - loadScroll

[Demo] [Download]


Dead Simple jQuery Content Lazy Load Plugin - lazyscript

lazyscript is an ultra-light jQuery plugin to provide lazy load functionality just by adding a custom jQuery selector class to your Html elements.

Dead Simple jQuery Content Lazy Load Plugin - lazyscript

[Demo] [Download]


Image Lazy Loader Plugin for jQuery - lazyload

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.

Image Lazy Loader Plugin for jQuery - lazyload

[Demo] [Download]


jQuery Plugin For Lazy Loading of Images/Videos - Lazy Load XT

Lazy Load XT is a mobile-oriented, fast and extensible jQuery plugin for lazy loading of images, videos and other media.

jQuery Plugin For Lazy Loading of Images/Videos - Lazy Load XT

[Demo] [Download]


Lightweight jQuery Content Lazy Loading Plugin - Recliner

A lightweight jQuery plugin that delays the loading of images or other dynamic content (e.g. iframes, ajax content) until they're about to come into view.

Lightweight jQuery Content Lazy Loading Plugin - Recliner

[Demo] [Download]


Vanilla JS Lazy Loading Plugins:

Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

lazyframe.js is a native JavaScript library used to delay the loading of iframe content for Google Maps, Youtube/Vimeo/Vine videos and so on.

Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

[Demo] [Download]


Progressive Image lazy Loading With Blur Effect

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.

Progressive Image lazy Loading With Blur Effect

[Demo] [Download]


Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

Just another fast, dependency-free JavaScript library used to lazy load images with a progressive blur loading effect as you seen on Medium or Instagram.

Tiny JavaScript Library For Progressive Image Lazy Loading – Progressively

[Demo] [Download]


Pure JavaScript Library For Lazy Loading Images – lazyload.js

lazyload.js is a stand-alone JavaScript library for lazy loading images without any dependencies. It supports the srcset attribute and with and takes best advantage from the progressive JPEG image format.

Pure JavaScript Library For Lazy Loading Images – lazyload.js

[Demo] [Download]


Responsive Image Lazy Load JS Library – lazysizes

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.

Responsive Image Lazy Load JS Library – lazysizes

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome lazy loading effects on the web & mobile? Check out the jQuery Lazy Loading and JavaScript Lazy Loading sections.

  • Publication date: 06.06.2019
  • Source