Learning jQuery

Lazy Load plugins let you delay loading of images on the webpage without interrupting loading of complete page which tend to be beneficial since it allows to improves your page load time and improves user experience. For this roundup we have chosen 18 Best jQuery Lazy Load plugins that will improve your page load time and deliver a better end user experience to you website visitors.

If you are aware of any other jQuery lazy load plugins, please do let us know by posting a comment below. Enjoy !!

1. LazyYT.js

lazyYT.js is a jQuery plugin to lazy load Youtube videos. On the initial load, the div will be replaced by a preview img of the video. On hover, the preview img will be replaced by theiframe Youtube video.

2. jQuery Lazyload Any

Lazyload Any is a jQuery plugin provides a lazyload function for images, videos, iframe or anything.

3. Echo.js

Echo.js is a simple image lazy loading library, it's less than 1KB minified. Lazy-loading works by only loading the assets needed when the elements 'would' be in view, which it'll get from the server for you upon request, which is automated by simply changing the image src attribute.

4. BttrLazyLoading

BttrLazyLoading is a Jquery plugin that allows your web application to only load images within the viewport. It also allows you to have different version of an image for 4 different screen sizes. BttrLazyLoading allows your Web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably.

5. Lazy Load XT

Lazy Load XT is a mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos with build-in support of jQueryMobile framework.

6. Unveil

Unveil is a jQuery plugin which is lightweight version of Lazy Load plugin. Unveil has support for serving high-resolution images to devices with retina displays and it less than 1k.

7. Responsive Lazy Loader Plugin

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.

8. Lazy Loading Google Maps

A tiny jQuery plugin for lazy-loading Google Maps.

9. LazySizes

lazysizes is a fast lazyloader for images (including responsive images), iframes and scripts/widgets without any dependency. It may become also your number one tool to integrate responsive images. It can also automatically calculate the sizes attribute for your responsive images, it helps to seperate layout (CSS) from content/structure (HTML) and makes integrating responsive images into any enviroment simply simple.

10. beLazy

beLazy is a lightweight lazy loading image script. 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 loaded if he/she doesn't browse the whole page.

11. Tada

Tada is a lightweight, no dependency library for lazy image load. jQuery plugin is also provided. Duplicate element check, throttled scroll handler, percent threshold supported.

11. Lazyr.js

Layzr.js is a small, fast, modern, and dependency-free library for lazy loading images.

12. Sheetrock

Sheetrock is a jQuery plugin for querying, retrieving, and displaying data from Google Spreadsheets. Use it to load entire sheets or leverage SQL-like queries to treat Google Spreadsheets as a quick-and-dirty JSON datastore.

13. Least.js

least.js is a random & responsive HTML 5, CSS3 gallery with lazyLoad. Installation and usage is simple, and the end result is quite beautiful.

14. Stalactite

A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser's decisions.

15. Lazy Line Painter

Lazy Line Painter is a jQuery plugin for path animation using the Raphaël Library. First of all, Export your line art from Illustrator as an .SVG, Ensure their are no fills, No closed paths – Line needs a start and end, Crop Artboard nice & tight.

16. DynaTree

Dynatree is a jQuery plugin that allows to dynamically create html tree view controls using JavaScript. It is optimized for large dynamic trees (DOM elements are only created when really needed). Programmable through a rich object oriented interface. It support for lazy loading and Ajax.

17. Fancytree

Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading.

18. jScroll

jScroll is a jQuery plugin for infinite scrolling. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc. This is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.