1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015"></script>
2.對(duì)于要懶加載的圖片進(jìn)行如下屬性設(shè)置。<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為未加載時(shí)的圖片，dataimg為實(shí)際要加載的圖片。
3.執(zhí)行l(wèi)azyload.init();
4.分tab的懶加載。判斷tab把下面的圖片有沒(méi)加載過(guò)。根據(jù)loaded屬性判斷，還要對(duì)非當(dāng)前tab所屬的圖片進(jìn)行class lazy去掉。對(duì)已加載的loaded為true的圖片，不加lazy屬性
5.注意lazyload.init()的執(zhí)行時(shí)機(jī)，如果在dom ready階段執(zhí)行，會(huì)下載所有圖片，不能實(shí)現(xiàn)懶加載。要在winow.onload完成這個(gè)階段去執(zhí)行。
lazyload.js代碼解讀：
/**
* 基于jQuery或者zeptoJS的惰性加載
*/
var lazyload = {
? init : function(opt){
? ? var that = this;
? ? var op = {
? ? ? ? anim: true,
? ? ? ? extend_height:400
? ? };
? ? // 合并對(duì)象，已有的{anim:true}+用戶自定義對(duì)象。也就是op = op + opt
? ? $.extend(op,opt);
? ? // 調(diào)用lazyload.img.init(op)函數(shù)
? ? that.img.init(op);
? },
? img : {
? ? init : function(n){
? ? ? var that = this;
? ? ? console.log(n);
? ? ? // 要加載的圖片是不是在指定窗口內(nèi)
? ? ? function inViewport( el ) {
? ? ? ? ? // 當(dāng)前窗口的頂部
? ? ? ? var top = window.pageYOffset
? ? ? ? // 當(dāng)前窗口的底部
? ? ? ? var btm = window.pageYOffset + window.innerHeight
? ? ? ? // 元素所在整體頁(yè)面內(nèi)的y軸位置
? ? ? ? var elTop = $(el).offset().top;
? ? ? ? // 判斷元素，是否在當(dāng)前窗口，或者當(dāng)前窗口延伸400像素內(nèi)
? ? ? ? return elTop >= top && elTop - n.extend_height <= btm
? ? ? }
? ? ? // 滾動(dòng)事件里判斷，加載圖片
? ? ? $(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){
? ? ? ? ? ? ? // 已經(jīng)加載過(guò)了，則中斷后續(xù)代碼
? ? ? ? ? if (_self.attr('loaded')) return;
? ? ? ? ? ? var img = new Image(), original = _self.attr('dataimg')
? ? ? ? ? ? // 圖片請(qǐng)求完成后的事件，把dataimg指定的圖片，放到src里面，瀏覽器顯示
? ? ? ? ? ? img.onload = function() {
? ? ? ? ? ? ? ? _self.attr('src', original).removeClass('lazy');
? ? ? ? ? ? ? ? n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
? ? ? ? ? ? }
? ? ? ? ? ? // 當(dāng)你設(shè)置img.src的時(shí)候，瀏覽器就在發(fā)送圖片請(qǐng)求了
? ? ? ? ? ? original && (img.src = original);
? ? ? ? ? ? _self.attr('loaded', true);
? ? ? }
? ? }
? }
};
<!doctype html>
<html lang="en">
? ? <head>
? ? ? ? <meta charset="UTF-8" />
? ? ? ? <title>懶加載實(shí)例</title>
? ? ? ? <style type="text/css">
? ? ? ? /*一定要有預(yù)先高度*/
? ? ? ? ? ? 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"
? ? ? ? ? ? };
? ? ? ? ? ? // 合并對(duì)象，已有的{anim:true}+用戶自定義對(duì)象。也就是op = op + opt
? ? ? ? ? ? $.extend(op,opt);
? ? ? ? ? ? // 調(diào)用lazyload.img.init(op)函數(shù)
? ? ? ? ? ? that.img.init(op);
? ? ? ? ? },
? ? ? ? ? img : {
? ? ? ? ? ? init : function(n){
? ? ? ? ? ? ? var that = this,
? ? ? ? ? ? ? selectorName = n.selectorName,
? ? ? ? ? ? ? realSrcAtr = n.realSrcAtr,
? ? ? ? ? ? ? anim = n.anim;
//? ? ? ? ? ? ? console.log(n);
? ? ? ? ? ? ? // 要加載的圖片是不是在指定窗口內(nèi)
? ? ? ? ? ? ? function inViewport( el ) {
? ? ? ? ? ? ? ? ? // 當(dāng)前窗口的頂部
? ? ? ? ? ? ? ? var top = window.pageYOffset,
? ? ? ? ? ? ? ? // 當(dāng)前窗口的底部
? ? ? ? ? ? ? btm = window.pageYOffset + window.innerHeight,
? ? ? ? ? ? ? ? // 元素所在整體頁(yè)面內(nèi)的y軸位置
? ? ? ? ? ? ? elTop = $(el).offset().top;
? ? ? ? ? ? ? ? // 判斷元素，是否在當(dāng)前窗口，或者當(dāng)前窗口延伸400像素內(nèi)
? ? ? ? ? ? ? ? return elTop >= top && elTop - n.extend_height <= btm;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? // 滾動(dòng)事件里判斷，加載圖片
? ? ? ? ? ? ? $(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){
? ? ? ? ? ? ? ? ? ? ? // 已經(jīng)加載過(guò)了，則中斷后續(xù)代碼
? ? ? ? ? ? ? ? ? if (_self.attr('lazyImgLoaded')) return;
? ? ? ? ? ? ? ? ? ? var img = new Image(),
? ? ? ? ? ? ? ? ? ? original = _self.attr('dataimg');
? ? ? ? ? ? ? ? ? ? // 圖片請(qǐng)求完成后的事件，把dataimg指定的圖片，放到src里面，瀏覽器顯示
? ? ? ? ? ? ? ? ? ? img.onload = function() {
? ? ? ? ? ? ? ? ? ? ? ? _self.attr('src', original);
? ? ? ? ? ? ? ? ? ? ? ? anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? // 當(dāng)你設(shè)置img.src的時(shí)候，瀏覽器就在發(fā)送圖片請(qǐng)求了
? ? ? ? ? ? ? ? ? ? original && (img.src = original);
? ? ? ? ? ? ? ? ? ? _self.attr('lazyImgLoaded', true);
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? };
? ? ? ? /*
? ? ? ? * selectorName，要懶加載的選擇器名稱
? ? ? ? * extend_height? 擴(kuò)展高度
? ? ? ? * anim? 是否開(kāi)啟動(dòng)畫(huà)
? ? ? ? * realSrcAtr? 圖片真正地址*/
? ? ? ? lazyload.init({
? ? ? ? ? ? anim:false,
? ? ? ? ? ? selectorName:".samLazyImg"
? ? ? ? });
? ? </script>
</html>
