懶載入簡單的方法

kimingw發表於2017-09-05
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>懶載入例項</title>
    <style type="text/css">
        /*一定要有預先高度*/
        img{
            width: 600px;
            height: 260px;
        }
        .samLazyImg{
            position: relative;
        }
    </style>
</head>

<body>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/11de79502d0af.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f99f823ed3d.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/680120973b82.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/67f87ba08cf0.jpg!v1sell" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/22ec075a17c33.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/2e4a699680788.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/c2f4043a4991.jpg!v1sell" alt="" />
</div>
<div>
    <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f996b4386ab.jpg!v1sell" alt="" />
</div>
</body>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var lazyload = {
        init : function(opt){
            var that = this,
                op = {
                    anim: true,
                    extend_height:0,
                    selectorName:"img",
                    realSrcAtr:"dataimg"
                };
            // 合併物件，已有的{anim:true}+使用者自定義物件。也就是op = op + opt
            $.extend(op,opt);
            // 呼叫lazyload.img.init(op)函式
            that.img.init(op);

        },

        img : {
            init : function(n){

                var that = this,
                    selectorName = n.selectorName,
                    realSrcAtr = n.realSrcAtr,
                    anim = n.anim;
//              console.log(n);

                // 要載入的圖片是不是在指定視窗內
                function inViewport( el ) {
                    // 當前視窗的頂部
                    var top = window.pageYOffset,
                        // 當前視窗的底部
                        btm = window.pageYOffset + window.innerHeight,
                        // 元素所在整體頁面內的y軸位置
                        elTop = $(el).offset().top;
                    // 判斷元素，是否在當前視窗，或者當前視窗延伸400畫素內
                    return elTop >= top && elTop - n.extend_height <= btm;
                }

                // 滾動事件裡判斷，載入圖片
                $(window).on('scroll', function() {
                    $(selectorName).each(function(index,node) {
                        var $this = $(this);

                        if(!$this.attr(realSrcAtr) || !inViewport(this)){
                            return;
                        }

                        act($this);

                    })
                }).trigger('scroll');

                // 展示圖片
                function act(_self){
                    // 已經載入過了，則中斷後續程式碼
                    if (_self.attr('lazyImgLoaded')) return;
                    var img = new Image(),
                        original = _self.attr('dataimg');
                    // 圖片請求完成後的事件，把dataimg指定的圖片，放到src裡面，瀏覽器顯示
                    img.onload = function() {
                        _self.attr('src', original);
                        _self.css({ "opacity": ".2","top":"1rem" }).animate({ "opacity": "1","top":"0" }, 280);
                    };
                    // 當你設定img.src的時候，瀏覽器就在傳送圖片請求了
                    original && (img.src = original);
                    _self.attr('lazyImgLoaded', true);
                }
            }
        }
    };

    /*
     * selectorName，要懶載入的選擇器名稱
     * extend_height  擴充套件高度
     * anim  是否開啟動畫
     * realSrcAtr  圖片真正地址*/
    lazyload.init({
        anim:false,
        selectorName:".samLazyImg"
    });
</script>

</html>

　　

相關文章