图片懒加载实现

之前为了把网站收录图片改成懒加载找jquery框架 后面找到一个jquery.lazyload.js
使用的过程中发现一个问题,我的页面是有四个竖的div组成,懒加载的时候,他是按照代码的先后来懒加载,这样只有第一列的div里的内容才能懒加载,后面几列都不是根据滚动条的移动而加载。
研究了好久,才发现,问题处在一下代码
/*www.yishish.com www.wotaobaoke.com www.lingshij.com*/
this.each(function() {
var self = this;

/* Save original only if it is not defined in HTML. */
if (undefined == $(self).attr("original")) {
$(self).attr("original", $(self).attr("src"));
}

if ("scroll" != settings.event ||
undefined == $(self).attr("src") ||
settings.placeholder == $(self).attr("src") ||
($.abovethetop(self, settings) ||
$.leftofbegin(self, settings) ||
$.belowthefold(self, settings) ||
$.rightoffold(self, settings) )) {

if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
} else {
$(self).removeAttr("src");
}
self.loaded = false;
} else {
self.loaded = true;
}

/* When appear is triggered load original image. */
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
/*www.yishish.com www.wotaobaoke.com www.lingshij.com*/
/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});

/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);

return this;

};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值