JS圖片懶加載

簡介

當頁面圖片太多時，加載速度就會很慢。尤其是用2G/3G/4G訪問頁面，不僅頁面慢，而且還會用掉很多流量。圖片懶加載的原理就是將頁面內所有需要加載的圖片全部換成一張默認的圖片（一般尺寸很小），只有圖片在可視區域才去請求加載。

實現原理

<img class="lazy" src="loading.png" data-src="img/example.jpg">

頁面打開時首先會加載src里的圖片，即很小的加載圖；通過監聽scroll事件，當圖片在可視區域時，使用data-src替換src，加載真正的圖片。

使用

實際使用時一般使用已經存在的插件，如lazyload插件。

lazyload插件網上能搜出很多，常見的是：
1、jquery.lazyload.js: 依賴jQuery

/*!
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2015 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.9.7
 *
 */

http://www.appelsiini.net/projects/lazyload

2、lazyload.js: 依賴jQuery或者Zepto

/*!
 * An jQuery | zepto plugin for lazy loading images.
 * author -> jieyou
 * see https://github.com/jieyou/lazyload
 * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
 * use component's throttle https://github.com/component/throttle (MIT)
 */

下載：https://github.com/52fhy/lazyload

以上二者用法是一樣的，第二個基於第一個修改，以支持zepto。現在以第二個示例：

lazyload.js

1、引入

<script src="jQuery.js"></script>
<script src="lazyload.min.js"></script>

2、使用

<!--lazyload.js默認懶加載原圖片屬性是data-original-->
<img class="lazy" src="loading.png" data-original="img/example.jpg">

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

3、配置
缺省：

defaultOptions = {
    threshold                   : 0, //圖像提前多少加載，單位px
    failure_limit               : 0,
    event                       : 'scroll', //觸發事件
    effect                      : 'show', //效果
    effect_params               : null, //effect的參數數組
    container                   : w, //使用容器，默認是window
    data_attribute              : 'original', //可以改成src，即對應data-src屬性
    data_srcset_attribute       : 'original-srcset',
    skip_invisible              : true,
    appear                      : emptyFn,
    load                        : emptyFn,
    vertical_only               : false, //豎直方向滾動的頁面中使用
    check_appear_throttle_time  : 300,
    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        : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
    // todo : 將某些屬性用global來配置，而不是每次在$(selector).lazyload({})內配置
}

示例：

$(function() {
  $(".lazy").lazyload({         
        effect : "fadeIn",//效果
        data_attribute : 'src',//可以改成src，即對應data-src屬性
        event: 'scroll',//默認值
        container: $(".content"), //一般無需指定，即window。sui框架里必須指定
 	});
});

參考：
1、jQuery延遲加載(懶加載)插件
http://www.w3cways.com/1765.html
2、Zepto picLazyLoad Plugin，圖片懶加載的Zepto插件、
http://ons.me/484.html
3、手機網站實現圖片惰性加載 | UC優視用戶研究與體驗設計中心-R.E.D
http://red.uc.cn/?p=1052
4、jQuery.lazyload詳解
http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html
5、jieyou/lazyload: 一個jQuery或zepto的圖片延遲加載插件
https://github.com/jieyou/lazyload
6、javascript圖片懶加載與預加載的分析 - HackerVirus - 博客園
http://www.cnblogs.com/Leo_wl/p/3526254.html