jQuery-lazyload圖片延遲加載使用詳解

lazyload是一個(gè)jQuery的插件趁俊，當(dāng)你的項(xiàng)目中有很多圖片或者有大圖的時(shí)候，你希望只有在滾動(dòng)條快滾動(dòng)到圖片的位置時(shí)再加載圖片，而如果用戶沒有再往下滾動(dòng)滾動(dòng)條的時(shí)候，圖片不需要加載鲜漩，那么，你就可以用到這個(gè)插件集惋，它的作用就是延遲加載孕似。
我們先來看一個(gè)特別簡單的示例，然后再看看他們中的每一塊代表什么意思：

jQuery-lazyload 示例.jpeg

具體的原理我這里就不做過多介紹刮刑，您可以到文章最后的幾個(gè)地址進(jìn)行了解喉祭。我寫這篇文章的目的是想直接通過代碼的方式能讓你馬上上手使用，所以下面我會(huì)把整理的代碼展示出來雷绢。

在你項(xiàng)目中的img標(biāo)簽可以像下面這樣寫：

<img class="lazyload" src="./img/清晰度較低或者loading的gif圖片.jpg" 
alt="活動(dòng)現(xiàn)場圖片" 
data-original="./img/真正想要顯示的圖片.jpg" 
width="750" height="360">

<!--
注1：添加width和height有助于在圖片未加載時(shí)占滿所需要的空間
注2：class="lazyload" 是為了區(qū)別哪些圖片需要延遲加載泛烙，哪些不需要。
這個(gè)例子中翘紊，我們只針對img標(biāo)簽中class帶lazyload的需要延時(shí)加載處理蔽氨。
而lazyload你可以隨你自己取class名。
-->

使用lazyload肯定要先引用jQuery文件：

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/lazyload.min.js"></script>

jQuery的代碼可以像下面這樣寫：

    $(function () {
        $("img.lazyload").lazyload({
            threshold: 200,
            effect: "fadeIn"
        });
    });

.lazyload()里面帶了兩個(gè)參數(shù)帆疟，他們分別代表什么意思孵滞，還有沒有其他的參數(shù)呢？

threshold: 200,    // 當(dāng)距離圖片還有200像素的時(shí)候鸯匹，就開始加載圖片。

effect: "fadeIn",  // 控制顯示圖片的效果泄伪，fadeIn的效果淡入動(dòng)畫殴蓬。

container: $("#container")  // 父容器。指定哪個(gè)父容器中的圖片延遲加載。

event: "click",     // 默認(rèn)的觸發(fā)事件是滾動(dòng)染厅，當(dāng)你滾動(dòng)的時(shí)候痘绎，就會(huì)檢查然后加載。
                       你可以使用event屬性肖粮，設(shè)置你自己的加載事件孤页，之后你可以自定義觸發(fā)這個(gè)事件的條件，然后去加載圖像涩馆。

// event: 'scrollstop' // 當(dāng)頁面中存在上百張行施，甚至數(shù)百張圖片時(shí)，建議使用 scrollstop 事件魂那。
                       scrollstop 介紹地址：https://j11y.io/javascript/special-scroll-events-for-jquery/

具體參數(shù)說明

/*
* container：window  

* event:  默認(rèn)值 'scroll',另外還有scrollstop蛾号，sporty，click

* effect: 默認(rèn)值 'show'涯雅，加載使用的動(dòng)畫效果鲜结。
          如 show, fadeIn, slideDown 等 jQuery 自帶的效果，或者自定義動(dòng)畫活逆。

* effectspeed: 默認(rèn)值 undefined精刷，動(dòng)畫時(shí)間。
               作為 effect 的參數(shù)使用：effect(effectspeed)

* data_attribute: 默認(rèn)值 'original'蔗候，真實(shí)圖片地址的 data 屬性后綴

* threshold: 默認(rèn)值 0怒允，靈敏度。
             表示當(dāng)圖片出現(xiàn)在顯示區(qū)域中的立即加載顯示琴庵；
             設(shè)為整數(shù)表示圖片距離 x 像素進(jìn)入顯示區(qū)域時(shí)進(jìn)行加載误算；
             設(shè)為負(fù)數(shù)表示圖片進(jìn)入顯示區(qū)域 x 像素時(shí)進(jìn)行加載。

* failure_limit: 默認(rèn)值 0迷殿，容差范圍儿礼。
                 頁面滾動(dòng)時(shí)，Lazy Load 會(huì)遍歷延遲加載的圖片庆寺，檢查是否在顯示區(qū)域內(nèi)蚊夫，
                 默認(rèn)找到第 1 張不可見的圖片時(shí)，就終止遍歷懦尝。
                 因?yàn)?Lazy Load 認(rèn)為圖片的排序是與 HTML 中的代碼中的排序相同知纷，但是也可能會(huì)出現(xiàn)例外，
                 通過該值來擴(kuò)大容差范圍陵霉。

* skip_invisible: 默認(rèn)值 true琅轧，跳過隱藏的圖片。圖片不可見時(shí)（如 display:none）踊挠，不強(qiáng)制加載乍桂。

* appear: 默認(rèn)值 null，圖片加載時(shí)的事件 (Function)，
          有 2 個(gè)參數(shù)：elements_left（未加載的圖片數(shù)量）睹酌、settings（lazyload 的參數(shù)）权谁。

* load: 默認(rèn)值 null，圖片加載后的事件 (Function)憋沿，
        有 2 個(gè)參數(shù)旺芽，同 appear 。
*
* */

注1：當(dāng)你指定了哪個(gè)父容器中的圖片做延遲加載時(shí)辐啄，你需要給這個(gè)父容器寫一寫樣式采章，例如：

#container {
     height: 600px;
     overflow: scroll;
}

而jQuery代碼可以像下面這樣寫：

$("img.lazyload").lazyload({
    container: $("#container")  
});

當(dāng)瀏覽器不支持 JavaScript 時(shí)的降級(jí)處理

<img class="hide" src="清晰度較低或者loading的gif圖片.jpg" data-original="example.jpg" width="765" height="574">
<noscript><img src="./img/真實(shí)的圖像.jpg" width="765" height="574"></noscript>

<!--noscript 包含真實(shí)的圖像位置，當(dāng)瀏覽器不支持 Javascript则披，直接顯示圖像共缕。
對現(xiàn)有圖像，隱藏處理士复，使用 show() 方法觸發(fā)顯示图谷。-->

上面的class="hide"我們需要給它添加一行樣式：

.hide {
    display: none;
}

這個(gè)時(shí)候，我們的jQuery代碼可以像下面這樣寫：

$("img.hide").show().lazyload({
   effect: "fadeIn"
});

另一個(gè)使用場景：當(dāng)前顯示區(qū)域內(nèi)的圖片先進(jìn)行加載阱洪，顯示區(qū)域外的圖片延遲5秒之后再加載

這個(gè)地方需要用event:'sporty'
jQuery的具體代碼如下：

$(function(){
    $('img').lazyload({
        effect:'fadeIn',
        event:'sporty'
    });
});

$(window).bind('load', function(){
    var timeout = setTimeout(function(){
        $('img').trigger('sporty')
    }, 5000);
});

以上內(nèi)容部分參考自下面的文章：
緩沖加載圖片的 jQuery 插件 lazyload.js 使用方法詳解
 jQuery Lazy Load 圖片延遲加載
 示例