本文介绍一种基于jQuery的图片懒加载实现方案。核心思路是将图片真实地址暂存于自定义的src2属性中，初始时不加载。通过监听窗口滚动事件，判断图片是否进入可视区域，若进入则将src2的值赋给src属性以触发加载，并移除src2属性。该示例代码展示了如何配置加载对象及处理滚动逻辑。
jQuery图片懒加载实现原理与代码示例
近期分析了京东商城采用的基于jQuery的图片懒加载方案，具体实现逻辑如下。
其核心机制是将图片的真实地址预先赋值给img标签的src2自定义属性，而在页面初始显示阶段，仅使用默认占位图。当需要展示图片时，再将src2中的地址赋值给src属性，从而触发图片加载。
具体代码实现如下所示。
function lazyload(option) {
var settings = {
defObj: null,
defHeight: 0
};
settings = $.extend(settings, option || {});
var defHeight = settings.defHeight;
var 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) {
//显示后，去掉src2属性
$(this).attr("src", src2).removeAttr("src2");
}
}
});
};
imgLoad();
$(window).bind("scroll", function() {
imgLoad();
});
}
lazyload({
defObj:".w1"
});