Minimal jQuery Image Lazy Load Plugin - Lazy Load

Minimal jQuery Image Lazy Load Plugin - Lazy Load
File Size: 83.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery plugin that makes it easier to implement image laze load functionality on your web page, with image placeholder and load effects support.

How to use it:

1. Include the latest jQuery javascript library and jquery.lazyload.js at the end of your web page.

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

2. Insert images with data-original attributes pointing to the image sources you would like to lazy load.

<p><img data-original="images/1.jpg" width="300" height="300" alt="" class="lazy" /></p>
<p><img data-original="images/2.jpg" width="300" height="300" alt="" class="lazy" /></p>
...

3. Enable the lazing loading of images with class of 'lazy'.

<script>
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>

4. Default options and callbacks.

<script>
$(function() {
$("img.lazy").lazyload({
threshold       : 0,
failure_limit   : 0,
event           : "scroll",
effect          : "show",
container       : window,
data_attribute  : "original",
skip_invisible  : true,
appear          : null,
load: null,
placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
});
});
</script>

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