js懒加载

图片懒加载指的是在浏览过程中随着需要才被加载出来,例如某宝上面浏览商品时,会伴随很多的图片,如果一次全部加载出来的话,显然资源有些浪费,并且加载速度也会相对降低,那么懒加载的实现很重要。即随着浏览翻阅时,下面的图片才被加载出来,这样又不浪费带宽,访问网页速度也很快,用户体验也会有所提升。

说了这么多,其实所需要注意的要点有:

1. 屏幕可视区域的高度

2. 每张图片在文档中的高度

3. 图片符合要求进行加载时,将图片地址赋值给属性 src

4. 对屏幕滚动事件进行监控

5. 首次进入网页未滑动屏幕时要显示的图片

要测试图片懒加载效果,可以在Chrome浏览器的控制台选择“Network”,把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果

完整代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript图片懒加载实现</title>

    <style>

         p{

             border:2px solid red;

         }

        img{

            width: 300px;

            height:100px;

            margin-bottom: 100px;

           

        }

    </style>

</head>

<body>

<div>

    <p><img src="" data-original="./images/0.jpg" /></p>

    <p><img src="" data-original="./images/1.jpg" /></p>

    <p><img src="" data-original="./images/2.jpg" /></p>

    <p><img src="" data-original="./images/3.jpg" /></p>

    <p><img src="" data-original="./images/4.jpg" /></p>

    <p><img src="" data-original="./images/5.jpg" /></p>

    <p><img src="" data-original="./images/6.jpg" /></p>

    <p><img src="" data-original="./images/7.jpg" /></p>

    <p><img src="" data-original="./images/8.jpg" /></p>

    <p><img src="" data-original="./images/9.jpg" /></p>

    <p><img src="" data-original="./images/10.jpg" /></p>

    <p><img src="" data-original="./images/11.jpg" /></p>

    <p><img src="" data-original="./images/12.jpg" /></p>

    <p><img src="" data-original="./images/13.jpg" /></p>

    <p><img src="" data-original="./images/14.jpg" /></p>

    <p><img src="" data-original="./images/15.jpg" /></p>

    <p><img src="" data-original="./images/0.jpg" /></p>

    <p><img src="" data-original="./images/1.jpg" /></p>

    <p><img src="" data-original="./images/2.jpg" /></p>

    <p><img src="" data-original="./images/3.jpg" /></p>

    <p><img src="" data-original="./images/4.jpg" /></p>

    <p><img src="" data-original="./images/5.jpg" /></p>

    <p><img src="" data-original="./images/6.jpg" /></p>

    <p><img src="" data-original="./images/7.jpg" /></p>

    <p><img src="" data-original="./images/8.jpg" /></p>

</div>

<script>

  var wHeight=document.documentElement.clientHeight ;//获取屏幕可视高度

  var imgs=document.querySelectorAll("img");

       imgs.forEach(function(item,idx){

            //getBoundingClientRect().top

           var  ownHeight=item.getBoundingClientRect().top;//获取当前图片在文档中的位置 

           if(ownHeight<=wHeight){

               item.src=item.getAttribute("data-original")

           }

       })

       window.οnscrοll=function(){//添加屏幕滚动事件

          imgs.forEach(function(item,idx){

           var hasSorollTop=window.scrollY;//获取屏幕已滚动高度

           var  ownHeight=item.getBoundingClientRect().top;//获取当前图片在文档中的位置

           console.log(hasSorollTop)

           if(ownHeight<=(hasSorollTop+wHeight)){

                 //当图片在屏幕滚动时,当图片在文档中的位置小于屏幕已滚动高度+屏幕可视高度的时加载此图片,

               item.src=item.getAttribute("data-original")

           }

       })

       }

</script>

</body>

</html>

 

 

js懒加载

上一篇:oracle的lpad()函数


下一篇:Docker-compose常用软件部署(mysql、redis、rabbitmq)