### jQuery & Zepto Lazy - Delayed Content, Image and Background Loader [![GitHub version](https://badge.fury.io/gh/dkern%2Fjquery.lazy.svg)](http://github.com/dkern/jquery.lazy) [![NPM version](https://badge.fury.io/js/jquery-lazy.svg)](http://www.npmjs.org/package/jquery-lazy) [![Bower version](https://badge.fury.io/bo/jquery-lazy.svg)](http://bower.io/search/?q=jquery-lazy) [![Dependencies Status](https://david-dm.org/dkern/jquery.lazy/status.svg)](https://david-dm.org/dkern/jquery.lazy) [![devDependencies Status](https://david-dm.org/dkern/jquery.lazy/dev-status.svg)](https://david-dm.org/dkern/jquery.lazy?type=dev) --- [![JetBrains & PhpStorm](http://jquery.eisbehr.de/lazy/images/git_logo_jb_ps.png)](https://jetbrains.com/phpstorm) _This project is friendly supported by [JetBrains](https://jetbrains.com) & [PhpStorm](https://jetbrains.com/phpstorm)!_ --- ### Table of Contents * [About Lazy](#about-lazy) * [Compatibility](#compatibility) * [Documentation / Examples](#documentation--examples) * [Installation](#installation) * [CDN](#cdn) * [Self-Hosted](#self-hosted) * [Package Managers](#package-managers) * [Basic Usage](#basic-usage) * [Callbacks / Events](#callbacks--events) * [Instances and public Functions](#instances-and-public-functions) * [Custom Content Loaders](#custom-content-loaders) * [Loader Plugins](#loader-plugins) * [Configuration Parameters](#configuration-parameters) * [Build and Validation](#build-and-validation) * [Available gulp Tasks](#available-gulp-tasks) * [Bugs / Feature request](#bugs--feature-request) * [License](#license) * [Donation](#donation) --- ## About Lazy Lazy is a fast, feature-rich and lightweight delayed content loading plugin for jQuery and Zepto. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view. You can use Lazy in all vertical and horizontal scroll ways. It supports images in `` tags and backgrounds, supplied with css like `background-image`, by default. On those elements Lazy can set an default image or a placeholder while loading and supports retina displays as well. But Lazy is even able to load any other content you want by [plugins](#loader-plugins) and [custom loaders](#custom-content-loaders). ## Compatibility Lazy will work with a wide range of browsers and support jQuery versions for years backwards and Zepto as alternative. You can pick any version since jQuery 1.7.2 or Zepto 1.1.6 or greater. There is no way to guarantee, that Lazy will work with all browsers, but all I've tested worked great so far. If you find any problems in specific browsers, [please let me know](http://github.com/dkern/jquery.lazy/issues). **Tested in:** IE, Chrome (+ mobile), Firefox (+ mobile), Safari (+ mobile) and Android Browser. ## Documentation / Examples For [documentation](http://jquery.eisbehr.de/lazy/#parameter), [examples](http://jquery.eisbehr.de/lazy/#examples) and other information take a look on the [project page](http://jquery.eisbehr.de/lazy/). ## Installation First of all, you will need a copy of [jQuery](http://jquery.com) or [Zepto](http://zeptojs.com) to use Lazy successfully on your project. If you get this you can install Lazy by different ways. Some examples below: #### CDN Lazy and all plugins are available over [cdnjs](http://cdnjs.com) and [jsDelivr](http://jsdelivr.com) CDN and can directly included to every page. ```HTML ``` #### Self-Hosted [Download](https://github.com/dkern/jquery.lazy/archive/master.zip) and save one of two available files to include Lazy to your page, either the [development](http://raw.githubusercontent.com/dkern/jquery.lazy/master/jquery.lazy.js) or the [minified](http://raw.githubusercontent.com/dkern/jquery.lazy/master/jquery.lazy.min.js) version. ```HTML ``` #### Package Managers Lazy is even available through [NPM](http://npmjs.org) and [Bower](http://bower.io). Just use one of the following commands below: [![NPM](https://nodei.co/npm/jquery-lazy.png?compact=true)](https://nodei.co/npm/jquery-lazy/) ```sh $ npm install jquery-lazy $ bower install jquery-lazy ``` ## Basic Usage 1.) The basic usage of Lazy is pretty easy. First of all you need to prepare all elements you want to lazy load. By default add a `data-src` attribute to images containing the loadable image and/or a `data-loader` attribute to elements witch shall use a [plugin](#loader-plugins) or [custom loaders](#custom-content-loaders). ```HTML

``` 2.) Start using Lazy by calling it after page load. You don't have to specify your elements exactly, but for better performance, or different options, load your elements over unique classes or any other selector. ```JS $(function($) { $("img.lazy").Lazy(); }); ``` Take a look at the [documentation](http://jquery.eisbehr.de/lazy/) to get an idea what Lazy is capable of. ## Callbacks / Events Lazy comes with a bunch of [callbacks and events](http://jquery.eisbehr.de/lazy/index.php?c=callback) you can assign to. Just add them by initialization settings: * `beforeLoad` - before item is about to be loaded * `afterLoad` - after the item was loaded successfully * `onError` - whenever an item could not be loaded * `onFinishedAll` - after all items in instance was loaded or returned an error ## Instances and public Functions Lazy supports multiple parallel instances. Just initialize them with different selectors. 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: ```JS // object oriented way var instance = $("img.lazy").Lazy({chainable: false}); // grab from elements (only works well if you use same selectors) $("img.lazy").Lazy(); var instance = $("img.lazy").data("plugin_lazy"); ``` Every instance has some public available functions to control it's behavior. There are currently six available: ```JS instance.config(entryName[, newValue]); // get or set an configuration entry instance.addItems(items); // add new items to current instance instance.getItems(); // get all unhandled items left of current instance instance.update([useThrottle]); // loads all elements in current viewport instance.force(items); // force loading specific items, ignoring the viewport instance.loadAll(); // loads all remaining available elements from this instance instance.destroy(); // unbinds all events and stop execution directly ``` ## Custom Content Loaders With the custom loaders option there is a powerful solution to load every contents the Lazy way. Lazy will handle everything, you just create a loading method witch got triggered whenever the element hits the visibility threshold. It is still possible to load images and custom loaders in the same Lazy instance. To use this just define a loader function inside the Lazy initialisation and pass the loader name to the `data-loader` attribute of the elements witch should be lazy loaded. ```HTML

``` ```JS $(".lazy").Lazy({ // callback beforeLoad: function(element) { console.log("start loading " + element.prop("tagName")); }, // custom loaders customLoaderName: function(element) { element.html("element handled by custom loader"); element.load(); }, asyncLoader: function(element, response) { setTimeout(function() { element.html("element handled by async loader"); response(true); }, 1000); } }); ``` ## Loader Plugins The loader plugins can extend the functionality of Lazy, like loading other elements and data. It is basically the same as the [custom content loaders](#custom-content-loaders), with the difference, that plugins can extend all further instances globally at once permanently and let them handle specific elements like `

	Stars	Issues	Version	Updated	Created
blazy	2,624	60	1.8.2	7 years ago	8 years ago
jquery-lazy	1,007	14	1.7.11	3 years ago	9 years ago
owl.carousel	7,800	1,174	2.3.4	5 years ago	7 years ago
responsively-lazy	1,079	8	2.0.2	6 years ago	8 years ago

blazy vs jquery-lazy vs owl.carousel vs responsively-lazy

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past