图片懒加载

最新推荐文章于 2024-04-24 09:44:44 发布

逗子

最新推荐文章于 2024-04-24 09:44:44 发布

阅读量474

点赞数

分类专栏：前端插件文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_37612425/article/details/127568706

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

插件

2 篇文章 0 订阅

订阅专栏

1.图片懒加载

图片懒加载是使网页图片从上往下加载效果

方式一：jquery.lazyload.js

比较常用的方法

提前加载——Threshold

事件触发(可以是jquery事件，也可以是自定义事件)——Event

设定效果——Effects

滚动容器内的图片——containe

<!--
    1、将图片路径写入data-original属性
    2、给lazyload的图片增加一个名为lazy的class
    3、选择所有要lazyload的图片（img.lazy），执行lazyload();
-->
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.lazyload.js"></script>
<body>
    <div>
        <img src="./images/1-1.png" alt="图片懒加载">
        <img class="lazy" data-original="./images/2-1.png" alt="图片懒加载">
    </div>
    <script>
        $(function() {
              $("img.lazy").lazyload({effect: "fadeIn"});
        });
    </script>
</body>

方式二：EasyLazyload.js

比较全能的延迟加载，不会对样式有影响。

最主要可以不用特意去设定图片的width和height（毕竟图片不一致的宽高大有人需要，难不成还真的一个一个去设定？）而且scroll到照片时，有缓冲视觉效果

<script src="js/jquery.min.js"></script>
<script src="js/EasyLazyload.min.js"></script>
<body>
    <div>
        <img src="./images/1-1.png" alt="图片懒加载">
        <img data-lazy-src="./images/2-1.png" alt="图片懒加载">
    </div>
    <script>
       lazyLoadInit({
            coverColor:"white",
            coverDiv:"<h1>test</h1>",
            offsetBottom:0,
            offsetTopm:0,
            showTime:1100,
            onLoadBackEnd:function(i,e){
                console.log("onLoadBackEnd:"+i);
            }
            ,onLoadBackStart:function(i,e){
                console.log("onLoadBackStart:"+i);
            }
        });
    </script>
</body>