基于jQuery的图片懒加载实现：利用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"
});