第一百五十六節，封裝庫--JavaScript，延遲加載

封裝庫--JavaScript，延遲加載

 

延遲加載的好處，就是在瀏覽器視窗外的圖片，不加載，拖動鼠標到瀏覽器視窗內後加載，用戶不看的圖片就不用加載，能夠減小服務器大量流量

將圖片的src地址用一張統一的圖片，這樣初始化都加載這張圖片，減小流量

將圖片正真的鏈接地址用另外的屬性賦值

當用戶視窗高度加上滾動條高度，大於等於，圖片頭部與瀏覽器頭部的距離時，將正真的鏈接地址，改變到src，

 

html

<!--延遲加載-->
    <div id="photo">
        <dl>
            <dt><img xsrc="img/p1.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p2.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p3.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p4.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>

        <dl>
            <dt><img xsrc="img/p5.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>
            <dd>延遲加載圖片</dd>
        </dl>
    </div>

css

/*延遲加載*/
#photo {
    width:900px;
    float:left;
}
#photo dl {
    width:225px;
    height:270px;
    float:left;
    margin:5px 0 15px 0;
}
#photo dl dt {
    width:200px;
    height:250px;
    margin:0 auto;
}
#photo dl dd {
    height:25px;
    line-height:25px;
    text-align:center;
}

前臺js

//延遲加載
    var wait_load = $('.wait_load');                      //獲取全部的圖片節點
    wait_load.shzh_tou_ming_du(0);                        //將全部圖片設置成透明
    $(window).yuan_su_shi_jian('scroll',_wait_load);
    $(window).yuan_su_shi_jian('resize',_wait_load);
    function _wait_load() {
        setTimeout(function () {                          //延遲100毫秒
            for (var i = 0; i < wait_load.jd_length(); i++) {                        //根據圖片的長度來循環
                var _this = wait_load.hq_jd(i);                                      //獲取到每次循環對應的圖片對象
                if(getInner().height + gun_dong_tiao_wei_zhi().top >= ju_li_liu_lan_qi_tou(_this)) {      //判斷視窗高度加上滾動條的高度，大於等於，元素頭部到瀏覽器頭部距離時
                    $(_this).qh_shu_xing_zhi('src', $(_this).qh_shu_xing_zhi('xsrc')).yi_dong_tou_ming({  //每次循環對應的圖片改變src並顯示出來
                        attr: 'o',
                        target: 100,
                        t: 30,
                        step: 10
                    });
                }
            }
        }, 100);
    }

 

首先要引入封裝庫