Lightweight & Powerful jQuery Image Lazy Load Plugin - lazyload

lazyload is a simple, lightweight yet powerful jQuery plugin that provides image lazy load functionality on your web page with following features:

• Easy to implement.
• Works with jQuery or Zepto.
• Supports local images, ajax images and background images.
• Lots of options to customize.
• Cross browser. Supports IE6/7.

Basic Usage:

1. Include the jQuery library and the jQuery lazyload plugin' script at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="lazyload.js"></script>

2. Insert images you wish to lazy load in your web page. Use data-original attribute to define the sources of your images.

<img class="lazy" data-original="demo-1.jpg" width="" height="" alt="Demo">
<img class="lazy" data-original="demo-2.jpg" width="" height="" alt="Demo">
<img class="lazy" data-original="demo-3.jpg" width="" height="" alt="Demo">
...

3. Call the function on images to enable the plugin.

$("img.lazy").lazyload();

4. Options and defaults.

threshold : 0,
failure_limit: 0,
event  : 'scroll', // jquery events
effect : 'show', // show or fadein
effect_params: null,
container : w,
data_attribute  : 'original',
skip_invisible  : true,
appear : emptyFn,
load: emptyFn,
vertical_only: false,
minimum_interval: 300,
use_minimum_interval_in_ios : false,
url_rewriter_fn : emptyFn,
no_fake_img_loader : false,
placeholder_data_img  : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
// for IE6\7 that does not support data image
placeholder_real_img  : 'placeholder.png'

Changelog:

2018-09-21

• bugfix

2017-02-28

• bugfix

2015-11-18

• update and bugfix.

2015-09-17

• update and bugfix.

2015-01-31

• Fixed.

2015-01-21

• Fixed.

2014-11-13

• Fixed.

2014-10-11

• fixed for zepto.js

---

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