lazyload插件实现图片懒加载

效果图如下：

图片来源：重庆猪八戒网

为什么要使用图片懒加载？？？
当我们进入到某个页面的时候，会有很多的图片，有些图片可能在很下面，当我们加载页面但没有滚动的时候，图片就已经全部加载完成了，其实下面的图片不滚动是看不到的，等于说最开始加载了等于白加载，反而降低了网页的加载速度；懒加载还有滚动到可视区域时才加载当前图片，也就是说图片不是一次性加载完成的，因此这样从一定程度减少服务端的请求及带宽。

懒加载的优点？？？
提高前端性能，给用户更好的体验，图片在需要时才加载，减轻服务的负担，提高页面的加载速度，能顾减少带宽。

图片懒加载的实现原理？？？
图片的加载是由src的值引起的，当对src赋值时浏览器会请求图片资源，基于这个可以利用html5的属性data-xxxx来保存图片的路径，当我们需要加载图片的时候才将data-xxxx的值赋值给src,这样就能实现图片的按需加载即懒加载。

实现步骤:
1.现在页面中引入jquery.min.js和jquery.lazyload.js

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

2.在img标签上自定义data-original="图片路径"

<style>
       * {
            margin: 0;
            padding: 0;
        }
        .img_box{
            width: 430px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin: auto;
            
        }
        img{
           margin-bottom: 10px;
        }
        
    </style>
    <div class="img_box">
        <img src="" alt="" data-original="./插件实现懒加载/img1.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img2.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img3.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img4.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img5.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img6.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img7.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img8.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img9.jpg" width="200px" height="200px">

        <img src="" alt="" data-original="./插件实现懒加载/img1.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img2.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img3.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img4.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img5.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img6.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img7.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img8.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img9.jpg" width="200px" height="200px">

        <img src="" alt="" data-original="./插件实现懒加载/img1.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img2.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img3.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img4.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img5.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img6.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img7.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img8.jpg" width="200px" height="200px">
        <img src="" alt="" data-original="./插件实现懒加载/img9.jpg" width="200px" height="200px">
      
    </div>

3.获取需要懒加载的图片调用lazyload()

 <script>
        $(function () {
            $("img").lazyload({ effect: "fadeIn" });
        })
    </script>