Best jQuery Lazy Load Plugins & Tutorials with Demo

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

Lazy-loading Google Maps

Lazy-loading Google Maps

A tiny jQuery plugin for lazy-loading Google Maps. jQuery plugin, which just loads the maps and then gives away the full control of the loaded ones to you.

On every scroll and browser resize interval the plugin checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn’t loaded before) Google Maps API script file and then initiates the corresponding map instances. Finally, there’s a callback function which is called within every map instance initiation so that you can continue doing whatever you need with your maps.

bLazy : jQuery Lazy loading Plugin

bLazy : jQuery Lazy loading Plugin

bLazy is a lightweight lazy loading and multi-serving image script. It’s written in JavaScript why it doesn’t have any dependencies for 3rd party libraries like jQuery. bLazy is working in all modern browser including IE7+.

Features:

  • bLazy is used on big sites with millions of monthly visitors so it has been tested out in the real world.
  • bLazy is written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery.
  • bLazy can lazy load all types of images including background images.
  • bLazy can lazy load images depending on screensize (multi-serve images).
  • bLazy can serve retina images on retina devices.

jQuery LazyImage Plugin

jQuery LazyImage Plugin

A simple and lightweight plugin to lazily load images.

Toolkit : Front-End UI toolkit built with HTML5, CSS3, jQuery

Toolkit : Front-End UI toolkit built with HTML5, CSS3, jQuery

Titon Toolkit is a collection of very powerful user interface components and utility classes for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Toolkit makes use of the latest and greatest technology. This includes HTML5 for semantics, CSS3 for animations and styles, Sass for CSS pre-processing, Grunt for task and package management, and powerful new browser APIs for the JavaScript layer.

picoSlides : jQuery Plugin for SlideShare Presentations

picoSlides : jQuery Plugin for SlideShare Presentations

picoSlides is a jQuery plugin for directly embedding SlideShare presentations without using IFRAMEs. It leverages SlideShare’s oEmbed API to offer a responsive interface that enables optimal use of bandwidth and simple slide navigation.

Features:

  • Adaptive slide images: fetches device-appropriate versions of images depending on the dimensions of the slideset container.
  • Lazy slide loading: the first slide image is used as a preview poster of the whole presentation, a la YouTube. The remaining slides are downloaded only if the user hits the ‘Next’ button.

BttrLazyLoading.js : jQuery Responsive Lazy Loading plugin

BttrLazyLoading.js : jQuery Responsive Lazy Loading plugin

BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 differents screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px).

LaziestLoader : jQuery plugin to smartly Lazy load images

LaziestLoader : jQuery plugin to smartly Lazy load images

A responsive-aware jQuery plugin to smartly lazy load images and other elements.Speed up page load times by delaying the load of images and other elements until they enter — or are about to enter — the viewport. You can specify an single image source, or a range of source images for responsive applications. Additionally, the source can dynamically change on browser resize.

jQuery lazyload Any

jQuery lazyload Any

A jQuery plugin provides a lazyload function for everything.jQuery-lazyload-any currently supports IE7+, Chrome, Firefox, Safari and Opera.

jQuery Responsive Lazy Loader

jQuery Responsive Lazy Loader

A responsive lazy loader. Load image rendition according to CSS display & breakpoint.Responsive lazy loader allows you lo load the most appropriate image renditions according to the current breakpoint and to the current display into the CSS grid-system.

It can be used as a simple lazy loader, simply as a responsive lazy loader (taking care of the breakpoint) or as an advanced lazy loader taking care of breakpoint and display.