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:
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 loadedonLoad- on time the image is loadingafterLoad- after the image was loaded successfullyonError- whenever an image could not be loadedonFinishedAll- after all images in selector was loaded or returned an error
Please report bugs and feel free to ask for new features directly on GitHub.