This time I will share jQuery Plugin and tutorial about Lightweight & Powerful jQuery Image Lazy Load Plugin – lazyload, hope it will help you in programming stack.
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.
1 |
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></ script > |
2 |
< 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.
1 |
< img class = "lazy" data-original = "demo-1.jpg" width = "" height = "" alt = "Demo" > |
2 |
< img class = "lazy" data-original = "demo-2.jpg" width = "" height = "" alt = "Demo" > |
3 |
< img class = "lazy" data-original = "demo-3.jpg" width = "" height = "" alt = "Demo" > |
3. Call the function on images to enable the plugin.
1 |
$( "img.lazy" ).lazyload(); |
4. Options and defaults.
07 |
data_attribute : 'original' , |
08 |
skip_invisible : true , |
12 |
minimum_interval: 300, |
13 |
use_minimum_interval_in_ios : false , |
14 |
url_rewriter_fn : emptyFn, |
15 |
no_fake_img_loader : false , |
16 |
placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC' , |
18 |
placeholder_real_img : 'placeholder.png' |
Changelog:
2018-09-21
2017-02-28
2015-11-18
2015-09-17
2015-01-31
2015-01-21
2014-11-13
2014-10-11
This awesome jQuery plugin is developed by jieyou. For more Advanced Usages, please check the demo page or visit the official website.