Javascript Lazyload延遲加載特效

Javascript Lazyload延遲加載特效,有效降低HTPP連接次數，提高首屏加載時間

1、增加了圖片預加載可選

2、修改了圖片本身就在可視范圍的時候直接顯示而不需要滾動條觸發

3、修改了Splice刪除數組的時候，會跳過下一張圖片BUG

4、瀏覽器窗口resize的時候圖片出現也會加載

5、判斷圖片父層包裹頂部或者底部出現在可視范圍內即可顯示圖片

源代碼在底部，效果如下：

延時加載

 

• 
• 
• 

• 
• 
• 
• 

主要代碼如下：

var Lazy = {
        $:function(arg,context){
            var tagAll,n,eles=[],i,sub = arg.substring(1);
            context = context|| document;
            if(typeof arg =='string'){
                switch(arg.charAt(0)){
                    case '#':
                        return document.getElementById(sub);
                        break;
                    case '.':
                        if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = Lazy.$('*');
                        n = tagAll.length;
                        for(i = 0;i<n;i++){
                            if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }
                        return eles;
                        break;
                    default:
                        return context.getElementsByTagName(arg);
                        break;
                }
            }
        },
        getPos:function (node) {
            var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                    scrollt = document.documentElement.scrollTop || document.body.scrollTop;
            var pos = node.getBoundingClientRect();
            return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
        },
        bind:function(node,type,handler){
            node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
        },
        unbind:function(node,type,handler){
            node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler);
        },
        toArray:function(eles){
            var arr = [];
            for(var i=0,n=eles.length;i<n;i++){
                arr.push(eles[i]);
            }
            return arr;
        }
    };
    function imgLazyLoad(){
        var timer,screenHeight = document.documentElement.clientHeight;
        // 選擇所有圖片
        var allimg = Lazy.$('img');
        // 篩選CLASS為lazyload的圖片
        var elems = Lazy.$('.lazyload',allimg);
        // 轉換為真正的數組
        elems = Lazy.toArray(elems);
        if(!elems.length) return;
        // 沒有發生滾動事件時如果圖片在可視范圍之內，也顯示
        for(var i = 0;i < elems.length;i++){
            // 獲取圖像的父元素即包裹圖像的元素，判斷圖像是否在可視區域即直接判斷父元素是否可視
            var parent = elems[i].parentNode;
            var pos = Lazy.getPos(parent);
            var posT = pos.top;
            var posB = pos.bottom;
            // 沒有滾動條情況如果距離頂部的距離小於屏幕的高度則賦值SRC
            if(posT < screenHeight){
                elems[i].src = elems[i].getAttribute('data-img');
                // 移除后，數組的長度減一，下一個下標需減一
                elems.splice(i--,1);
            }
        }
        // 綁定scroll事件
        Lazy.bind(window,'scroll',loading);
        Lazy.bind(window,'resize',loading);
        function loading(){
            timer && clearTimeout(timer);
            timer = setTimeout(function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                screenHeight = document.documentElement.clientHeight;
                console.log(111);
                for(var i = 0;i < elems.length;i++){
                    var parent = elems[i].parentNode;
                    var pos = Lazy.getPos(parent);
                    var posT = pos.top;
                    var posB = pos.bottom;
                    var screenTop = screenHeight+scrollTop;
                    // 元素頂部出現在可視區  或者  元素底部出現在可視區
                    if((posT > scrollTop && posT <  screenTop) || (posB > scrollTop && posB < screenTop)){
                        elems[i].src = elems[i].getAttribute('data-img');
                        elems.splice(i--,1);
                    }else{
                        // 去掉以下注釋開啟圖片預加載
                        // new Image().src = elems[i].getAttribute('data-img');
                    }
                }
                if(!elems.length){
                    Lazy.unbind(window,'scroll',loading);
                    Lazy.unbind(window,'resize',loading);
                }
            },300);
        }
    }
    imgLazyLoad();

 

使用方法：

1、在圖片上增加lazyload的類(class='lazyload')

2、把真實的圖片地址放入自定義屬性data-img 中，把圖片的SRC屬性設置為一個一像素的透明圖片，圖片需要設置width，height屬性，以免布局混亂

如下：

<img data-img="http://farm6.staticflickr.com/5323/7378265586_e12444509d_n.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" width="640" height="480"  alt="" class='lazyload'>

3、在需要延遲加載的頁面調用imgLazyLoad()函數；