标签：
来自XXX的前言：
什么是ImageLazyLoad技术
在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的
交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可
见）中的图片是不加载的，这样势必会引起速度上质的提升。
实现原理：
当图片滚动到可视区时将图片加载进来。
图片不在可视区判断：
（一）：图片距离页面顶端的高度 大于 窗口可视区的高度+window滚动条的scrollTop。
（二）：图片距离页面顶端的高度+图片自身的高度 小于 window滚动条的scrollTop。
在lazyload中的实现（lazyload源码在后面）:
var _this=$(this), //this就是图片 top=win.scrollTop(), //win就是window imgTop=_this.offset().top, imgHeight=_this.outerHeight(true); if(top+win.height()>imgTop && imgTop+imgHeight>top){ ...（图片在可视区了） }
使用插件html准备（这是一个最简单的图片懒加载，或许这个已经达到正常需求）：
html结构： <div id="box"> <img data-src="http://www.netbian.com/d/file/20150325/41ada82f8c880dc89bdb95e38e8777f4.jpg" src="loading.svg" /> ...... <img data-src="http://www.netbian.com/d/file/20140410/875d3e24e25a00761a71c4d46f130da0.jpg" src="loading.svg" /> </div>
解释：先用一张所有的图片（src）加载loading这个图片，然后给img加个data-src的属性，存储着图片本来的路径，然后就等js实现了。
js使用插件：
<script>
$(‘img‘).lazyload(/*{
effect:‘fadeIn‘, //默认‘fadeIn(淡入)‘,参数列表[‘none‘,‘fadeIn‘]
fadeTime: 600, //淡出时间，默认600ms，参数为number类型时间
timeout: 260 //当用户看到图片时，是否立即加载图片，默认‘（延迟）260ms‘，参数列表[‘none‘,‘time(number类型)‘]
}*/)
</script>
插件源码（兼容ie6）：
;(function($){
$.fn.extend({
lazyload:function(Options){
var _this=$(this),
win=$(window),
timer=null,
settings=$.extend({
effect: ‘fadeIn‘,
fadeTime: 600,
timeout: 260
},Options);
loading(); //开始执行已经到可视区的图片
win.scroll(function(){
settings.timeout==‘none‘ ? loading() : ( clearTimeout(timer),timer=setTimeout(loading,settings.timeout) ) //是否延时加载
});
function loading(){
_this.each(function(){
var _this=$(this),
top=win.scrollTop(),
imgTop=_this.offset().top,
imgHeight=_this.outerHeight(true);
if(top+win.height()>imgTop && imgTop+imgHeight>top){
var dSrc=_this.attr(‘data-src‘);
if(dSrc==_this.attr(‘src‘)) return; //图片已经显示，则返回
$(new Image()).prop(‘src‘,dSrc).load(function(){ //替换图片URL
_this.attr(‘src‘,dSrc);
settings.effect==‘fadeIn‘ && _this.css(‘opacity‘,0).animate({opacity:1},settings.fadeTime)
})
}
})
}
}
})
})(jQuery);
Demo地址：http://small.890m.com/lazyload/
标签：
原文地址：http://www.cnblogs.com/aiweidong/p/4470769.html
