第一百五十六节，封装库--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);
    }

 

首先要引入封装库