Image Lazy Loader Plugin for jQuery - lazyload

Image Lazy Loader Plugin for jQuery - lazyload
File Size: 7.48 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The page loading time, as you know, is one of the most important factors for google ranking. The less time to load, the better it is for the SEO.  lazyload is such a jQuery plugin inspired by YUI ImageLoader that delays loading of many large images in long web pages to reduce the load time.  It supports fade-in effect, timeout loading effect, trigger loading, gazillion images and wide container. 

This principle has been used for many years in a wide variety of social media services like pinterest, facebook, twitter and etc. You'd better Use this plugin with a Back To Top Plugin such as Smooth Page Scroll to Top with jQuery.

How to use it(v1.x):

1. Include jQuery library and lazyload.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" charset="utf-8"></script>
<script src="jquery.lazyload.js" charset="utf-8"></script>

2. Markup

<!-- grey.gif is a 1×1 pixel grey gif, used as a placeholder image -->
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

3. Call the function

<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
effect : "fadeIn"
/*
appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});
</script>

4. Default settings (v1.x).

threshold       : 0,
failure_limit   : 0,
event           : "scroll",
effect          : "show",
container       : window,
data_attribute  : "original",
skip_invisible  : false,
appear          : null,
load            : null,
placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
};

Change logs:

v2beta (2017-09-23)

  • IE11 does not support arrow functions
  • Add missing header block

v1.9.7 (2015-08-28)

v1.9.5 (2015-04-20)

  • version update.

v1.9.4 (2015-04-02)

  • version update.

v1.9.4 (2015-02-26)

  • version update.

v1.9.3 (2014-01-27)

  • version update.

v1.9.2 (2014-01-15)

  • version update.

v1.9.1 (2013-11-17)

  • Fix iOS5 detection for iPhone (Berik Visschens)
  • Use .attr() instead of .data() since jQuery caches values when using latter. Fixes #37, #144 and #101 (Lorenz an Mey).
  • Do not add data:uri placeholder for non image elements.

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