記錄一

整體思路：

• 設定個data-original(自定義一個屬性)來存放真實地址
• 當滾動頁面時，檢查所有的img標籤，看是否出現在視野中，如果已經出現在了視野中，那繼續再進行判斷，看其是否已經被載入過了，如果還沒有被載入過，那就進行載入。

程式碼：

    lazyRender(); 
    var clock; //優化思路是當滑鼠滾輪停止滾動的時候，再去判定是否存在在視野中，而不是滾動過程中一直觸發。
    $(window).on('scroll',function () {//當頁面滾動的時候繫結事件
        if (clock) { // 如果在300毫秒內進行scroll的話，都會被clearTimeout掉，setTimeout不會執行。
                     // 如果有300毫秒外的操作，會得到一個新的timeID即clock，會執行一次setTimeout,然後儲存這次setTimeout的ID，
                     // 對於300毫秒內的scroll事件，不會生成新的timeID值，所以會一直被clearTimeout掉，不會執行setTimeout.
            clearTimeout(clock);
        }
        clock = setTimeout(function () {
            console.log('運行了一次');
            lazyRender();
        },200)
    })
    function lazyRender () {
        $('img.lazy-load').each(function () {
            if (checkShow($(this)) && !isLoaded($(this)) ){
                loadImg($(this));
            }
        })
    }
    function checkShow($img) { // 傳入一個img的jq物件
        var scrollTop = $(window).scrollTop();  //即頁面向上滾動的距離
        var windowHeight = $(window).height(); // 瀏覽器自身的高度
        var offsetTop = $img.offset().top;  //目標標籤img相對於document頂部的位置

        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2個臨界狀態之間的就為出現在視野中的
            return true;
        }
        return false;
    }
    function isLoaded ($img) {
        return $img.attr('data-original') === $img.attr('src'); //如果data-src和src相等那麼就是已經載入過了
    }
    function loadImg ($img) {
        $img.attr('src',$img.attr('data-original')); // 載入就是把自定義屬性中存放的真實的src地址賦給src屬性
    }
 

記錄二

引入外掛：jquery.lazyload.js

<script type="text/javascript" src="static/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="static/jquery.lazyload.min.js" ></script>  點選下載

<img class="lazy-load" data-original="images/dia_banner.png" alt=""/>

$(function() {
     placeholder : "images/test.jpg",   // placeholder,待圖片載入時,佔位圖則會隱藏
     effect: "fadeIn",  // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
     threshold: 200,  // threshold,值為數字,如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,
     event: 'click',   // event,載入圖片條件，值有click(點選),mouseover(滑鼠劃過),sporty(運動的),scroll(預設滾動)
     container: $(".home"),  // container,值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,拉動某DIV的滾動條時依次載入圖片
     failurelimit : 10 // failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在載入N張可見區域外的圖片,以避免出現這個問題.
});