图片懒加载

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

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

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

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

可以看这个地址。

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

2.可见加载。

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

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;
                        }
                    }
                }
            }
		}
	})
})