zl程序教程

您现在的位置是:首页 >  后端

当前栏目

JS图片根据鼠标滚动延时加载的实例代码

JS实例代码 图片 加载 鼠标 根据 滚动
2023-06-13 09:15:03 时间
最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给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"
});