JS图片根据鼠标滚动延时加载的实例代码
2023-06-13 09:15:03 时间
最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。
复制代码代码如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。
functionlazyload(option){
varsettings={
defObj:null,
defHeight:0
};
settings=$.extend(settings,option||{});
vardefHeight=settings.defHeight;
vardefObj=(typeofsettings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
varpageTop=function(){
returndocument.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
};
varimgLoad=function(){
defObj.each(function(){
if($(this).offset().top<=pageTop()){
varsrc2=$(this).attr("src2");
//已显示的不用再显示
if(src2){
//显示后,去掉src2属性
$(this).attr("src",src2).removeAttr("src2");
}
}
});
};
imgLoad();
$(window).bind("scroll",function(){
imgLoad();
});
}
lazyload({
defObj:".w1"
});
相关文章
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 用JS获取地址栏url参数的方法_js的url是啥
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- js精度溢出解决方案
- js多级树形弹出一个小窗口层(非常好用)实例代码
- JS各种网页尺寸判断实例方法
- .NET+JS对用户输入内容进行字数提示功能的实例代码
- js中复制行和删除行的操作实例
- js实时获取系统当前时间实例代码
- js实现json数据行到列的转换的实例代码
- JS中图片缓冲loading技术的实例代码
- C#Js时间格式化问题简单实例
- js控制不同的时间段显示不同的css样式的实例代码
- JS简单实现文件上传实例代码(无需插件)
- JS实现字体选色板实例代码
- JS实现侧悬浮浮动实例代码
- JS实现匀速运动的代码实例
- JS实现多物体缓冲运动实例代码
- JS获取月的最后一天与JS得到一个月份最大天数的实例代码
- JS去除字符串两端空格的简单实例
- js中switchcase循环实例代码
- js形成页面的一种遮罩效果实例代码
- node.js中的socket.io入门实例
- js实现文章文字大小字号功能完整实例
- js使用removeChild方法动态删除div元素