图片懒加载

临时想到点谢谢，以后再慢慢完善。

001.先看这个博客http://www.cnblogs.com/Leo_wl/p/3526254.html

1.图片预先加载的一个思路，

比如说焦点大图，在第一张大图加载后，我们可以预先加载图片放到隐藏域了，这样就做到了图片的预先下载。

可以看这个地址。

http://www.qdfuns.com/notes/40851/6323f6be50cf5b6857426fabd4b52779.html

2.可见加载。

当网页拉到对应的scroll之后，在加载对应的图片。和瀑布流中的加载有相似的地方。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

function isVisiable(elem) {   if (!elem) return false;   // console.log(($(window).scrollTop()+"::"+($(elem).offset().top+$(elem).outerHeight()))+"::"+(($(window).scrollTop()+$(window).height())+"::"+$(elem).offset().top))   return ($(window).scrollTop() <= ($(elem).offset().top + $(elem).outerHeight())) && (($(window).scrollTop() + $(window).height()) > $(elem).offset().top); }   var lazyQueue = [     '800' : [         '.js_ad1','.js_ad2'     ],     '900' : [         '.js_ad3','.js_ad4'     ] ]; //先把对应的img放入到body中,然后设置div为display:none然后监听scroll监听,如果发现可以展示了,就展示图片   $(window).bind("scroll", function() {     var timeFlag;     if(timeFlag){         clearTimeout(timeFlag);     }     timeFlag = setTimeout(function() {         for (var key in lazyQueue) {             if (lazyQueue.hasOwnProperty(key)) {                 var item = lazyQueue[key];                 if (!item) continue;                 for (var j = 0; j < item.length; j++) {                     var mItem = item[j];                     if (mItem && !mItem.loaded && isVisiable(mItem.elem)) {                         if (mItem.loaded === false) {                             mItem.cb && typeof mItem.cb == 'function' && mItem.cb();                             //设置为这个img为block                             mItem.loaded = true;                         } else {                             mItem = null;                         }                     }                 }             }         }     }) })