jQuery lazy load plugins allow you to create image loading effects until it becomes visible on screen which results in improved page loading time and bandwidth.
For this roundup we have compiled a list of 12 Best jQuery Lazy Load Plugins which you should use to create image loading effects for your websites. Following plugins are bundled with lots of handy features and are easy to use.
Here is the list of jQuery Lazy Load Plugins.
1. Lazy Loader
This plugin displays items from a json file or a database. Only the first items are loaded, the others are not loaded until user scrolls to them or click on the next button.
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.
Demo & Download
2. Blazy
bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). 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.
Demo & Download
3. 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.
With more than 10 options (such as animations or background color) and 4 events, BttrLazyLoading is fully customizable to adapt to most needs.
Demo & Download
4. LaziestLoader
It is a jQuery plugin that loads, from an array of sources, the most appropriate image at the last possible moment, and updates the image after a resize if needed. Custom callbacks and configuration provide even more functionality, like loading non-image elements and generic scroll-based triggers.
Demo & Download
5. LoftLoader
LoftLoader jQuery is a small but powerful plugin to add fun and unique preloader animation to any website. You can add animation to custom images. Loading, rotating, bouncing and rolling. Make every bit of your site enjoyable and memorable.
Demo & Download
6. Unveil
This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images.
Demo & Download
7. Responsive Lazy Loader
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.
Demo & Download
8. LazyYT.js
This is a jQuery plugin to lazy load Youtube videos. On the initial load, the div will be appended by a preview img of the video. On click of the image, the preview img will be replaced by the autoplaying iframe Youtube video.
Demo & Download
9. Easy Loader
EasyLoader is a cool Javascript library that will make all your pages unforgettable for your visitors. With EasyLoader you can build a chain of different animated effects just after the page is loaded. You can make stickers, the Info-Panel, closable elements. Easyloader will help you animate elements having either absolute or relative positioning with the same ease.
Demo & Download
10. JS Image Loader
It’s a JavaScript code that can be easy integrated into any web application and work in actual web browsers. After the integration you can add images into the form and they will be uploaded on server. Images can be moved or rotated and they all will be resized automatically on the client side. Besides selected images the form can contain any additional input fields.
Demo & Download
11. 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.
Demo & Download
12. Reloadprogressbar
ReloadProgressBar jQuery Plugin provides progress bar when your page is reloading as well as a contents are being loaded into a container, both with actual progress value. It is extremely easy to use and has 30 ready-to-use themes (+ it’s easy to create new ones). Also, it extends jQuery $.ajax() function, so that you can use progress bars to your own requests. And it all can be done with only one line of JavaScript code!
Demo & Download
