对图片“懒加载”的一些理解

最新推荐文章于 2024-08-27 22:36:25 发布

archerChenZW

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量1.1k

点赞数 2

文章标签： javascript 图片用户体验服务器

本文链接：https://blog.csdn.net/archerChenZW/article/details/69229326

版权

在以前工作的时候，公司每个礼拜都有让人分享到这周自己学习到的新知识的传统。那个时候了解了懒加载，现在就来分享一下：

首先我们来了解一下懒加载是为了解决什么问题。当我们在项目中遇到一些比较大的场景，里面包含着数以百计的图片，当用户访问这些页面的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片懒加载。在用户刚进入场景的时候，先加载几页的图片，开始显示给用户，然后在用户每翻一页时，再相应的加载后面对应的一页中的图片，这样，如果用户看了几页不想看了，后边的图片就不用加载了，减轻了服务器的压力。而相应的，用户在进入场景时，等待的时间也减少了许多。

懒加载在一些大型的网站中见到的比较多，因为网站考虑到性能、流量及用户体验方面的问题，在用户点击开网站的首页的时候，网站想尽可能的显示更多的信息给用户，又要考虑到服务器的性能的问题，还不能让用户等待的时间过长，所以这里就会使用图片的懒加载。图片的懒加载可以让用户按照需求从服务器上加载图片，这样即节省了用户在代开首页时的等待时间，也节省了服务器的流量，所以是一个好的选择。懒加载的基本思路就是不给img标签写src属性，而是写到一个后边可以操作的属性中，如data-src中，然后在后边需要加载的时候，加载图片，图片地址写到src中。如下面的这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload Demo</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>


<div class="img">
    <img data-src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_81d09391.png" alt="logo"/>
    <br/>
    <button class="showImg">
        点我显示图片
    </button>

    <script type="text/javascript">
        $(".showImg").click(function() {
            var show = $(".img > img");
            show.attr("src", show.attr("data-src"));
        });
    </script>
</div>


</body>
</html>

如果需要这个img显示的时候，直接让这个img显示，然后把这个img的data-src给src就可以完成图片的懒加载。
让代码运行，然后打开chrome的调试工具，然后查看网络发现这里并没有对这个图片进行加载：
然后在点击图片，发现：
这样原理上就实现了图片的懒加载，但是在实际的生产环境中，肯定不会是这么简单的，去点击一个按钮，然后让图片加载出来，大多数的应用场景都是，图片到了要显示的屏幕中了，然后在去加载，或者说再差一点就要到屏幕中，然后开始加载。