1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015"></script>
2.對於要懶加載的圖片進行如下屬性設置。<img src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://img03.taobaocdn.com/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" />
其中src為未加載時的圖片，dataimg為實際要加載的圖片。
3.執行lazyload.init();
4.分tab的懶加載。判斷tab把下面的圖片有沒加載過。根據loaded屬性判斷，還要對非當前tab所屬的圖片進行class lazy去掉。對已加載的loaded為true的圖片，不加lazy屬性
5.注意lazyload.init()的執行時機，如果在dom ready階段執行，會下載所有圖片，不能實現懶加載。要在winow.onload完成這個階段去執行。
lazyload.js代碼解讀：
/** * 基於jQuery或者zeptoJS的惰性加載 */ var lazyload = { init : function(opt){ var that = this; var op = { anim: true, extend_height:400 }; // 合並對象，已有的{anim:true}+用戶自定義對象。也就是op = op + opt $.extend(op,opt); // 調用lazyload.img.init(op)函數 that.img.init(op); }, img : { init : function(n){ var that = this; console.log(n); // 要加載的圖片是不是在指定窗口內 function inViewport( el ) { // 當前窗口的頂部 var top = window.pageYOffset // 當前窗口的底部 var btm = window.pageYOffset + window.innerHeight // 元素所在整體頁面內的y軸位置 var elTop = $(el).offset().top; // 判斷元素，是否在當前窗口，或者當前窗口延伸400像素內 return elTop >= top && elTop - n.extend_height <= btm } // 滾動事件里判斷，加載圖片 $(window).bind('scroll', function() { $('img.lazy').each(function(index,node) { var $this = $(this) if(!$this.attr('dataimg')){ return } if ( !inViewport(this) ) return act($this) }) }).trigger('scroll') // 展示圖片 function act(_self){ // 已經加載過了，則中斷后續代碼 if (_self.attr('loaded')) return; var img = new Image(), original = _self.attr('dataimg') // 圖片請求完成后的事件，把dataimg指定的圖片，放到src里面，瀏覽器顯示 img.onload = function() { _self.attr('src', original).removeClass('lazy'); n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280); } // 當你設置img.src的時候，瀏覽器就在發送圖片請求了 original && (img.src = original); _self.attr('loaded', true); } } } };
2015年6月30日添加用例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>懶加載實例</title> <style type="text/css"> /*一定要有預先高度*/ img{ width: 600px; height: 260px; } </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-2.1.4.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); anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280); }; // 當你設置img.src的時候，瀏覽器就在發送圖片請求了 original && (img.src = original); _self.attr('lazyImgLoaded', true); } } } }; /* * selectorName，要懶加載的選擇器名稱 * extend_height 擴展高度 * anim 是否開啟動畫 * realSrcAtr 圖片真正地址*/ lazyload.init({ anim:false, selectorName:".samLazyImg" }); </script> </html>