Delayed Image Loading Program Plugin- lazy.js

File Size:45.83 KB
Views Total:288
Last Update:March 14, 2018
Publish Date:December 28, 2017
Official Website:Go to website

It is a cross-browser jQuery plugin which loads the specific images after the page uploading and it helps to speed up the loading time with going through this. It has the images outside of the visible area that helps in the loading when the scrolling is done. This process helps the page loading speed and can even decrease the traffic of the website.

How to use it:

1. Include jQuery library and jQuery Lazy plugin :

<script src=""></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 :

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

3. Call the plugin with default options :

jQuery(document).ready(function() {

4. Default options :

// general
name               : "lazy",
chainable          : true,
autoDestroy        : true,
bind               : "load",
threshold          : 500,
visibleOnly        : false,
append<a href="">Scroll</a>       : 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

Done ūüôā

Change Log

V 1.7.7

  • fixed¬†imageBase¬†issue in picture plugin

V 1.7.6

  • fixed bug where items where not correctly filtered in¬†_prepareItems
  • added support for¬†imageBase¬†config to picture plugin
  • updated jsdeliver links to github format
  • updated dev dependencies
  • some code style update in edited files

V 1.7.5

  • strict checks for all comparisons
  • fixed bug with¬†filter¬†for Zepto on¬†force¬†function
  • fixed examples in picture plugin file
  • added¬†jshint¬†for dependencies
  • fixed version for bower
  • fixed version in plugins file
  • updated year in all files

V 1.7.4

  • added¬†force¬†function
  • fixed usage of deprecated¬†load¬†event
  • added dev dependency badge to plugins readme

V 1.7.3

  • fixed issue¬†#58
  • created gulp build script for all files
  • fixed some bugs and warnings from jshint
  • fixed some readme anchors
  • changed some file headers to be consistent

V 1.7.2

  • fixed possible problems with jQuery 3's new async ready state
  • added¬†main¬†field to¬†package.json
  • changed¬†.error()¬†to¬†.trigger("error")
  • new¬†picture¬†plugin
  • new¬†vimeo¬†plugin
  • added cross domain / CORS hedaers to¬†iframe¬†plugin
  • corrected error response of¬†youtube¬†plugin


New Features:

  • Lazy can now have it's own loader plugins
  • support for¬†srcset¬†and¬†sizes¬†on¬†<img>¬†tags
  • imagebase¬†attribute can now be set for single elements
  • Lazy now works even with Zepto framework instead of jQuery

New Plugins:

  • AJAX
  • Audio / Video
  • iFrame
  • NOOP
  • Script
  • YouTube

Code Changes:

  • renamed internal¬†configuration¬†function to¬†config¬†to be more consistent
  • switch internally from¬†config()¬†function to¬†config¬†object
  • moved instance¬†name¬†from prototype to configuration option
  • switched from an object property to variable for namespace parameter
  • refactored code for better variable usage
  • better¬†for¬†loop usage everywhere
  • smallest¬†if-conditions whenever possible
  • plugins and loaders are now prioritized before image loading
  • fixed bug on multiple instances destroying each others events
  • fixed usage of¬†onFinishedAll¬†with custom loaders or plugin only
  • fixed double¬†load¬†or¬†error¬†event on plugins and custom loaders

Minimization Changes:

  • added function¬†_getElementTagName¬†for reused task
  • created some dictionary strings for often used words
  • complete refactoring for much smaller minified version

Description Changes:

  • fixed some typos and JSDoc's
  • added more inspection rules for IntelliJ IDEA IDE's
  • added JSDoc for constructor

V 1.6.7

  • fixed bug with¬†onFinishedAll¬†event was not triggered correctly in some cases
  • replaced deprecated¬†$.size()¬†function with¬†length¬†property
  • changed some descriptions and typos

V 1.6.6

  • correctly escape background images (thx¬†@pburke)
  • use¬†.on('load', ...)¬†instead of¬†.load(...)¬†(thx¬†@pentie)
  • getItems()¬†now returns only not completely loaded elements left (thx¬†@zspitzer)
  • reformat the whole code