基于jquery的图片懒加载js

在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载.

以下是实现代码(基于jquery):

function lazyload(option){
	var settings={
		defObj:null,
		defHeight:0
	};
	settings=$.extend(settings,option||{});
	var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
	var pageTop=function(){
		return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
	};
	var imgLoad=function(){
		defObj.each(function(){				
			if ($(this).offset().top<=pageTop()){
				var src2=$(this).attr("src2");
				if (src2){
					$(this).attr("src",src2).removeAttr("src2");
				}
			}
		});
	};
	imgLoad();

	// 绑定滚动事件
	$(window).bind("scroll",function(){			
		imgLoad();
	});
}

lazyload({
	defObj:"#plist"
})