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>