图片懒加载

最新推荐文章于 2024-01-11 14:36:27 发布

凉城以北夜微凉

最新推荐文章于 2024-01-11 14:36:27 发布

阅读量288

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/hello_mujinhua/article/details/73200816

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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.οnscrοll=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

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载

*{ margin:0; padding:0; } img{ width:100%; margin-bottom: 30px; min-height:400px; background-color: #ddd;
复制链接

扫一扫

专栏目录

图片懒加载

“相关推荐”对你有帮助么？