临时想到点谢谢,以后再慢慢完善。
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; } } } } } }) })