jQuery插件圖片懶加載lazyload

來自XXX的前言：

什麼是ImageLazyLoad技術
在頁面上圖片比較多的時候，打開一張頁面必然引發與服務器大數據量的 交互。尤爲是對於高清晰的圖片，佔的幾M的空間。ImageLazyLoad技術就是，當前可見界面的圖片是加載進來的，而不可見頁面（經過滾動條下拉可 見）中的圖片是不加載的，這樣勢必會引發速度上質的提高。

 

實現原理：

當圖片滾動到可視區時將圖片加載進來。

圖片不在可視區判斷：

（一）：圖片距離頁面頂端的高度 大於 窗口可視區的高度+window滾動條的scrollTop。

（二）：圖片距離頁面頂端的高度+圖片自身的高度 小於 window滾動條的scrollTop。

在lazyload中的實現（lazyload源碼在後面）:

var _this=$(this),　　//this就是圖片 top=win.scrollTop(),　　//win就是window imgTop=_this.offset().top, imgHeight=_this.outerHeight(true); if(top+win.height()>imgTop && imgTop+imgHeight>top){ 　　　　...（圖片在可視區了） }

 

使用插件html準備（這是一個最簡單的圖片懶加載，或許這個已經達到正常需求）：

html結構： <div id="box">
    　<img data-src="http://www.netbian.com/d/file/20150325/41ada82f8c880dc89bdb95e38e8777f4.jpg" src="loading.svg" />
 ...... <img data-src="http://www.netbian.com/d/file/20140410/875d3e24e25a00761a71c4d46f130da0.jpg" src="loading.svg" />
</div>

解釋：先用一張全部的圖片（src）加載loading這個圖片，而後給img加個data-src的屬性，存儲着圖片原本的路徑，而後就等js實現了。

js使用插件：

    <script> $('img').lazyload(/*{ effect:'fadeIn', 　 //默認'fadeIn(淡入)',參數列表['none','fadeIn'] fadeTime: 600, //淡出時間，默認600ms，參數爲number類型時間 timeout: 260 //當用戶看到圖片時，是否當即加載圖片，默認'（延遲）260ms'，參數列表['none','time(number類型)'] }*/) </script>

 

插件源碼（兼容ie6）：

;(function($){ $.fn.extend({ lazyload:function(Options){ var _this=$(this), win=$(window), timer=null, settings=$.extend({ effect: 'fadeIn', fadeTime: 600, timeout: 260 },Options); loading(); //開始執行已經到可視區的圖片
            win.scroll(function(){ settings.timeout=='none' ? loading() : ( clearTimeout(timer),timer=setTimeout(loading,settings.timeout) )    //是否延時加載
 }); function loading(){ _this.each(function(){ var _this=$(this), top=win.scrollTop(), imgTop=_this.offset().top, imgHeight=_this.outerHeight(true); if(top+win.height()>imgTop && imgTop+imgHeight>top){ var dSrc=_this.attr('data-src'); if(dSrc==_this.attr('src')) return;    //圖片已經顯示，則返回
 $(new Image()).prop('src',dSrc).load(function(){    //替換圖片URL
                            _this.attr('src',dSrc); settings.effect=='fadeIn' && _this.css('opacity',0).animate({opacity:1},settings.fadeTime) }) } }) }
　　　　　　　return _this } }) })(jQuery);

 

--------- 平平的分割線 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

有了來自 @李明夕 的指導，而後就對lazyload進行了改造，添加了函數節流，其實以前的也用到了，只不過不知道專業名稱-_-#，不過仍是學到很多，函數節流文章連接：http://www.alloyteam.com/2012/11/javascript-throttle/

而後就是添加了事件移除功能，應該是有利於性能優化的。下面是改事後的代碼：

;(function($){
    $.fn.extend({
        lazyload:function(Options){
            var gThis=$(this),
                win=$(window),
                
                throttle=function(fn,delay){    //函數節流，【執行函數，延遲時間】
                    var timer,
                        startTime=new Date();
                    
                    return function(){
                        clearTimeout(timer);
                        
                        if(!delay && new Date()-startTime>100){    //沒有延遲，並判斷延遲滾動時間的必須的時間
                            startTime=new Date();
                            fn()
                            
                        }else if(delay){
                            timer=setTimeout(function(){
                                startTime=new Date();
                                fn()
                            }, delay)
                        }
                    }
                },
            
                settings=$.extend({
                    effect: 'fadeIn',
                    fadeTime: 600,
                    delay: 400
                },Options);
            
            loading();    //開始便加載已經出如今可視區的圖片
            win.on( 'scroll.lazyload', throttle(loading, settings.delay) );
            
            function loading(){
                if(!gThis.length) return win.off('scroll.lazyload');    //當全部的圖片都加載完，移除窗口滾動事件
                
                gThis.each(function(){
                    var _this=$(this),
                        top=win.scrollTop(),
                        imgTop=_this.offset().top,
                        imgHeight=_this.outerHeight(true);
                    
                    if(top+win.height()>imgTop && imgTop+imgHeight>top){
                        gThis=gThis.not( _this );    //刪除jQuery選擇好的元素集合中已經被加載的圖片元素
                        
                        var dSrc=_this.attr('data-src');
                        $(new Image()).prop('src',dSrc).load(function(){    //替換圖片URL
                            _this.attr('src',dSrc);
                            settings.effect=='fadeIn' && _this.css('opacity',0).animate({opacity:1},settings.fadeTime)
                        })
                    }
                })
            }
            
            return $(this)
        }
    })
})(jQuery);

 

 

Demo地址：http://small.890m.com/lazyload/