Best jQuery Lazy Load Plugins & Tutorials with Demo

Yall.js : Fast, Flexible and Tiny Image Lazy Loader

Yall.js : Fast, Flexible and Tiny Image Lazy Loader

yall.js is a featured-packed lazy loading script for <img><picture><video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scrolltouchmoveresize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

Hqy-lazyload : JavaScript script for Lazy loading & Multi-serving Images

Hqy-lazyload : JavaScript script for Lazy loading & Multi-serving Images

A fast lightweight pure JavaScript script for lazy loading and multi-serving images, iframes, videos and more.

It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn’t browse the whole page.

Lozad.js : Highly Performant Lazy Loading Library

Lozad.js : Highly Performant Lazy Loading Library

Lozad js is a highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.

Features:

  • lazy loads elements performantly using pure JavaScript,
  • is a light-weight library, just 535 bytes minified & gzipped,
  • has NO DEPENDENCIES 🙂
  • allows lazy loading of dynamically added elements as well,
  • supports responsive images and background images

Progressively : JavaScript library to load Images Progressively

Progressively : JavaScript library to load Images Progressively

Progressively is a javascript library for loading images progressively. It’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It’s super small, < 1.2kB when minified & gzipped! It will load images on when user browse to the page, saving bandwidth & server requests.

Lazysizebg : jQuery Lazy Background Loading Plugin

Lazysizebg : jQuery Lazy Background Loading Plugin

jQuery.lazysizebg allows the user to specify different size background images for small, medium, and large screens and loaded after the page is loaded.

If you must have hero images on your pages and want to optimize for smaller screens, this is a quick, low profile tool for accomplishing this.

Eager Image Loader : JavaScript Library

Eager Image Loader : JavaScript Library

The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.

Colorify.js : Tiny JavaScript Color Extractor

Colorify.js : Tiny JavaScript Color Extractor

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs!

  • Extract the dominant color from an image
  • Generate gradients based on the images colors
  • Isolate colors and manipulates them everywhere in the page
  • Create a Lazy-revealer system for your images
  • Load image dynamically

Lazy Loader : Infinite scroll jQuery plugin

Lazy Loader : Infinite scroll jQuery plugin

JQuery Loader is the perfect plugin to display long pages of articles like a blog or the pictures of a gallery.
Choose the number items to load each time. The plugin is compatible with Isotope Plugin to display, filter & sort layouts.

LoadImages : jQuery plugin to Attach load listeners to Images

LoadImages : jQuery plugin to Attach load listeners to Images

A jQuery plugin to attach load listeners to images within a container and fire an event when all the images have loaded.

EsKju jQuery lazyLoading Plugin

EsKju jQuery lazyLoading Plugin

EsKju’s LazyLoading is a tool for loading content just in time in a Facebook-similar style. It was built using the jQuery library.

Features:

  • Supersedes dowdy paginations
  • Customizable trough settings and CSS
  • Highly compatible
  • Uses CSS3 transitions by default