图片懒加载

作者: 杭州程序员小陈 | 来源:发表于2021-06-28 10:38 被阅读0次

项目优化
JS
图片懒加载
图片懒加载
js 实现图片懒加载
图片懒加载和预加载
selenuim和phantonJs处理网页动态加载数据的爬取
懒加载和瀑布流
jquery懒加载、回到顶部
懒加载和预加载

1为什么要图片懒加载
懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。
2.实现图片懒加载的原理
图片加载是src属性做的事情，那么我们只要不给这个src属性赋值就不会发起请求了
然后，html5还提供自定义属性的方式：data-xxx
我们可以先把图片地址存在这里面，然后判断这个图片是否进入屏幕了，一旦进入屏幕，就把这个图片地址赋值给src,让它发起请求获取图片
但是实际上，我们的网络也没有那么稳定，如果网络不佳，图片将会为空
这将会造成页面布局的混乱，为了避免这种情况，可以占位
3.实现判断图片是否在屏幕上

1，DOMobj.getBoundingClientRect().top   //获取该元素到屏幕顶部的距离
2，window.innerHeight    //屏幕的高度

也就是当元素到屏幕顶部的距离小于屏幕高度时，就可以判定图片进入了屏幕。就把图片地址赋值给src，从而发起请求获取图片。
4.实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .lazy-load{
                display: block;
                width: 90%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img data-src="./image/1.jpg"  alt="1" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/2.jpg"  alt="2" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/3.jpg"  alt="3" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/4.jpg"  alt="4" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/5.jpg"  alt="5" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/6.jpg"  alt="6" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/7.jpg"  alt="7" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
            <img data-src="./image/8.jpg"  alt="8" class="lazy-load" src="https://img.pic88.com/preview/2020/08/01/1596324521812272.jpg!s640">
        </div>
    </body>

    <script type="text/javascript">
        //图片加载的函数
        function imgonload() {
            //把伪数组转化为真数组
            let imgs = [...document.querySelectorAll('.lazy-load')]
            for(let i=0; i<imgs.length; i++) {
              if(imgs[i].getBoundingClientRect().top < window.innerHeight) {
                //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
                imgs[i].src = imgs[i].dataset.src;
              }
            }
          }
          //第一次页面加载的时候，让屏幕内的图片正常加载，而屏幕外的图片就使用loading图片代替
         window.onload = imgonload;
         //监听滚轮事件，
         window.addEventListener('scroll',imgonload)
        
    </script>
</html>