图片懒加载

来源：互联网发布：科迅cms 编辑：程序博客网时间：2024/06/11 21:21

<!DOCTYPE html><html><head>    <title></title>    <style type="text/css">        *{            margin:0;            padding:0;        }        img{            width:100%;            margin-bottom: 30px;            min-height:400px;            background-color: #ddd;            height:300px;        }    </style></head><body><img lazyload="1.jpg" src=""><img lazyload="2.jpg" src=""><img lazyload="3.jpg" src=""><img lazyload="4.jpg" src=""><img lazyload="5.jpg" src=""><img lazyload="6.jpg" src=""><img lazyload="7.jpg" src=""><img lazyload="8.jpg" src=""><img lazyload="9.jpg" src=""><img lazyload="10.jpg" src=""><img lazyload="11.jpg" src=""><img lazyload="1.jpg" src=""><img lazyload="2.jpg" src=""><img lazyload="3.jpg" src=""><img lazyload="4.jpg" src=""><img lazyload="5.jpg" src=""><img lazyload="6.jpg" src=""><img lazyload="7.jpg" src=""><img lazyload="8.jpg" src=""><img lazyload="9.jpg" src=""><img lazyload="10.jpg" src=""><img lazyload="11.jpg" src=""><script type="text/javascript" src="jquery-3.2.0.min.js"></script><script type="text/javascript">    //js版本    var imgNum=document.getElementsByTagName('img').length;    var imgObj=document.getElementsByTagName('img');    var l=0;    window.onscroll=function(){        var seeHeight=document.documentElement.clientHeight;        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;        for(var i=l;i<imgNum;i++){            if(imgObj[i].offsetTop<seeHeight+scrollTop){                console.log(imgObj[i].getAttribute('src'));                console.log(imgObj[i].src);                if(imgObj[i].getAttribute("src")==""){                    imgObj[i].src=imgObj[i].getAttribute("lazyload");                }            }            if(imgObj[i].offsetTop>seeHeight+scrollTop){                l=i;                break;            }        }    }    //jquery版本   var l=0//js方法翻译版$(window).bind("scroll", function(event){        for(var i=l;i<$("img").length;i++){          if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){            if($("img").eq(i).attr("src") == ""){              var lazyloadsrc=$('img').eq(i).attr("lazyload");              $("img").eq(i).attr("src",lazyloadsrc);            }          }          if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){            l=i;            break;          }        } });</script></body></html>

刷新回顶部就是用这个事件，可以这么写。window.onbeforeunload  =  function(){$(window).scrollTop(0);}

阅读全文

0 0