jQuery Delayed Image Loading Plugin - lazy.js

jQuery Delayed Image Loading Plugin - lazy.js
File Size: 62.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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 eisbehr-. For more Advanced Usages, please check the demo page or visit the official website.