Minimal jQuery Image Lazy Load Plugin - Lazy Load

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.