图片懒加载  作用 : (图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)

当我们页面滑动到可视区域，再显示图片。

我们使用jquery插件库EasyLazyload。  注意，此时的 js 引入文件和js调用必须写到DOM元素  (图片)  最后面

在这个网址搜索图片懒加载 : (https://www.jq22.com/)        EasyLazyload.min.js

img 的 src 属性 必须改为  data-lazy-src

代码示例 : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img {
                width: 600px;
                height: 400px;
                margin: 0 auto;
                display: block;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <img data-lazy-src="img/公司2.jpg">
            <img data-lazy-src="img/公司3.jpg">
            <img data-lazy-src="img/公司4.jpg">
            <img data-lazy-src="img/公司5.jpg">
        </div>


        <script src="../jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            lazyLoadInit({
                showTime: 1100,
                onLoadBackEnd: function(i, e) {
                    console.log("onLoadBackEnd:" + i);
                },
                onLoadBackStart: function(i, e) {
                    console.log("onLoadBackStart:" + i);
                }
            });
        </script>
    </body>
</html>

 

版权声明：本文为w情dd毛g原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wqddmg/p/16165884.html