基于jquery的图片懒加载js
更新时间：2010年06月30日 12:26:48 作者：
在京东商城浏览时, 会发现产品图片只显示了一屏, 当页面向下滚动时下面的产品图片才逐渐加载.
以下是实现代码(基于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"
})
复制代码 代码如下:
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"
})
相关文章
这篇文章主要介绍了jQuery实现多级手风琴菜单，菜单效果更有特色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要介绍了JQuery.get提交页面不跳转的解决方法,本文分析了不跳转的原因同时给出了跳转的方法,需要的朋友可以参考下2015-01-01
这篇文章主要给大家介绍了关于jquery form表单序列化的注意事项，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了jquery datepicker参数介绍和示例,需要的朋友可以参考下2014-04-04
Jquery 最近浏览过的商品的功能实现代码，需要的朋友可以参考下。2010-05-05
jQuery是继prototype 之后的又一个优秀的Javascript框架，本篇文章给大家分享收藏的jquery技巧，对jquery技巧相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了jQuery实现向下滑出的二级菜单效果,涉及jquery鼠标事件及页面元素样式动态变换的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
下面小编就为大家带来一篇jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
针对jquery性能优化这个主题，想必大家都有所了解。下面是我搜集点一点资料关于jquery性能优化，大家可以参考参考。2014-05-05
最新评论