JS实现图片懒加载

Posted 2020-11-22 Qiao_Zhi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现图片懒加载相关的知识，希望对你有一定的参考价值。

　　在学习vue的时候了解到图片有懒加载这一说法，自己实践之后做记录。至少现在自己没有遇到这种需求。

　　这个可以在图片非常多的时候选择懒加载。电商网站应该有需求。

　　这些插件在jquery插件库也都可以找到。

1. Echo.js实现懒加载

　　Echo.js 不依赖于 jQuery 或其他 javascript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。

　　Echo.js 使用了 html5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性，但它获取值的方法不一样。

使用方法如下：

1.引入JS文件

        <script src="js/echo.min.js"></script>

2.html中

            <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">

　　blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度，或者在 CSS 中设置也可以，否则似乎很底部很底部的图片才会延迟加载。

3.JavaScript

            Echo.init({
                offset: 0,
                throttle: 0
            });

offset：离可视区域多少像素的图片可以被加载
throttle：图片延迟多少毫秒加载

例如：

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <title>简单的JavaScript图像延迟加载库Echo.js</title>

        <style>
            .demo img {
                width: 736px;
                height: 490px;
                background: url(images/loading.gif) 50% no-repeat;
            }
        </style>

    </head>

    <body>

        <div class="demo" style="width: 736px; margin: 0 auto;">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">

            <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">

        </div>

        <script src="js/echo.min.js"></script>

        <script>
            Echo.init({
                offset: 0,
                throttle: 0
            });
        </script>
    </body>

</html>

　　如果想实现3s后加载，JS修改为：

            Echo.init({
                offset: 0,
                throttle: 3000
            });

2.jquery.lazyload.js实现懒加载

1.引入相关js

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

2.界面：

　　为图片加入样式lazy 图片路径引用方法用data-original

<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

3.js出始化lazyload并设置图片显示方式

        <script type="text/javascript" charset="utf-8">
            $(function() {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
            });
        </script>

其参数如下：

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: ‘click‘,  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

例如：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">
        <title>Lazy Load Enabled</title>
    </head>

    <body>

        <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

        <img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

        <img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">

        <img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

        <img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

        <img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

        <script src="jquery-1.11.0.min.js"></script>
        <script src="jquery.lazyload.js?v=1.9.1"></script>

        <script type="text/javascript" charset="utf-8">
            $(function() {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
            });
        </script>

    </body>

</html>

　　根据开发者工具的network栏也可以看到发出请求的时间。

以上是关于JS实现图片懒加载的主要内容，如果未能解决你的问题，请参考以下文章

JS实现图片懒加载

原生JS实现图片懒加载之一：Element.getBoundingClientRect()