對前端而言，提高網(wǎng)頁的加載速度非常重要。眾所周知，圖片是最吃流量的。我們都知道的優(yōu)化技巧是頁面加載時只加載首屏頁面用到的圖片即可，其他的圖片資源可以稍后再加載。有一款jquery的lazyload插件便是一個可以實(shí)現(xiàn)圖片延遲加載的插件，在用戶觸發(fā)某個條件之后再加載對應(yīng)的圖片資源，這對網(wǎng)站的打開速度有很大提升。

    1、插件的使用方法很簡單（依賴jquery）：引入lazyload.js（壓縮版才4KB） 
    2、對我們想要延遲加載的圖片添加lazy樣式，用”data-original” 替換圖片的引用路徑

    3、將頁面里所有img屬性src屬性用data-xx代替，當(dāng)頁面滾動直至此圖片出現(xiàn)在可視區(qū)域時，用js取到該圖片的data-xx的值賦給src。

<!-- 對img標(biāo)簽使用 --><img class="lazy" data-original="img/example.jpg">
<!-- 延遲加載元素的背景圖 --><div class="lazy" data-original="img/bg.jpg">

    4、在JS文件中調(diào)用lazyload()方法，具體例子如下。

$(function(){
    //可任意選擇你想延遲加載的目標(biāo)元素，例如直接使用樣式名lazy作為選擇條件
    $("img .lazy").lazyload({
         placeholder : "img/grey.gif", //占位圖
         effect: "fadeIn", // 加載效果
         threshold: 200, // 提前加載
         event: 'click',  // trigger
         container: $("#container"),  //指定容器
         failurelimit : 5 // 發(fā)生混亂時的hack手段
    });
});

參數(shù)的具體說明如下：

本文鏈接：http://www.hkass.cn/article/173.html