jQuery Delayed Image Loading Plugin - lazy.js

jQuery Lazy is a cross-browser jQuery plugin that loads specified images after the page load itself and speeds up your loading time through this. Images outside of the visible area will only get loaded when the user scrolls to them. This will not only increase the page loading speed, it will even decrease your traffic.

Related plugins:

• Image Lazy Loader Plugin for jQuery - lazyload
• jQuery Plugin For Lazy Loading Images - lately.js
• Lightweight jQuery Image Lazy Load Plugin - unveil

How to use it:

1. Include jQuery library and jQuery Lazy plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>

2. Add a 'data-src' attribute to those images you want to load delayed and insert the image path you want to load over Lazy

<img class="lazy" data-src="path_to/image.jpg" src="" />

3. Call the plugin with default options.

jQuery(document).ready(function() {
    jQuery("img.lazy").lazy();
});

4. Default options.

// general
name               : "lazy",
chainable          : true,
autoDestroy        : true,
bind               : "load",
threshold          : 500,
visibleOnly        : false,
appendScroll       : window,
scrollDirection    : "both",
imageBase          : null,
defaultImage       : "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
placeholder        : null,
delay              : -1,
combined           : false,

// attributes
attribute          : "data-src",
srcsetAttribute    : "data-srcset",
sizesAttribute     : "data-sizes",
retinaAttribute    : "data-retina",
loaderAttribute    : "data-loader",
imageBaseAttribute : "data-imagebase",
removeAttribute    : true,
handledName        : "handled",
loadedName         : "loaded",

// effect
effect             : "show",
effectTime         : 0,

// throttle
enableThrottle     : true,
throttle           : 250,

// callbacks
beforeLoad         : undefined,
afterLoad          : undefined,
onError            : undefined,
onFinishedAll      : undefined

Changelog:

v1.7.10 (2018-05-22)

• update to the latest version.

---

This awesome jQuery plugin is developed by dkern. For more Advanced Usages, please check the demo page or visit the official website.