Lazy is a fast and lightweight delayed image and background loading plugin for jQuery. It is designed to speed up page loading times and decrease traffic to your users and customers by only loading the content in view. You can use Lazy in all scroll ways, from top-to-bottom, bottom-to-top, left-to-right and right-to-left. It does not only support images in <img/> tags, even backgrounds, supplied with css like background-image or other methods, are supported. Lazy can set an default image and a placeholder while loading and support retina displays.
Lazy will work with a wide range of browsers and support jQuery versions for years backwards. You can pick any version since jQuery 1.3.0 or greater. There is no way to guarantee, that Lazy will work with all browsers. But all i've tested worked great. If you find any problems in specific browsers, please let me know.
Tested in: IE 6-11, Chrome (mobile), Firefox (mobile), Safari (mobile) and Android Browser.
For documentation, examples and other information take a look on the project page.
First of all, you will need jQuery to use Lazy successfully on your project! If you get this in you can install Lazy by different ways. Some examples below:
Lazy is available over jsDelivr CDN and can directly included to every page.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/0.5.3/jquery.lazy.min.js"></script>Download and save one of two available files to include Lazy to your page, either the development or the minified version.
<script type="text/javascript" src="jquery.lazy.min.js"></script>Lazy is even available through NPM and Bower. Just use one of the following commands below.
$ npm install jquery-lazy
$ bower install jquery-lazy
1.) The basic usage of Lazy ist pretty easy. First of all you need to add a data-src attribute to those images you want to load delayed and insert the image path you want to load over Lazy. Best practice is to add a blank image to the src attribute:
<img class="lazy" data-src="path/to/image_to_load.jpg" src="blank.gif" />2.) Start using Lazy by calling it after page load. You don't have to specify your elements. But for better performance, or different options, load your images over unique classes or any other jQuery selector.
jQuery(document).ready(function() {
jQuery("img.lazy").Lazy();
});Take a look at the documentation to get an idea what Lazy is capable of.
Lazy comes with a bunch of callbacks and events you can assign to. Just add them by initialization settings:
beforeLoad- before image is about to be loadedafterLoad- after the image was loaded successfullyonError- whenever an image could not be loadedonFinishedAll- after all images in selector was loaded or returned an error
This plugin supports multiple parallel instances. Just initialize them with different selectors on jQuery. To access an instances public functions you can initialize them in an object oriented manner or grab the instance bind to every element by default:
// object oriented way
var instance = jQuery("img.lazy").Lazy({chainable: false});
// grab from elements (only works well if you use same selectors)
jQuery("img.lazy").Lazy();
var instance = jQuery("img.lazy").data("plugin_lazy");Every instance has some public available functions to control its behavior. There are currently three available:
instance.update(); // loads all images in current viewport
instance.loadAll(); // loads all remaining available images from this instance
instance.destroy(); // unbinds all events and stop execution directlyPlease report bugs and feel free to ask for new features directly on GitHub.