通过图片懒加载进行优化

最新推荐文章于 2024-07-31 08:45:55 发布

MINO吖

最新推荐文章于 2024-07-31 08:45:55 发布

阅读量1.8k

点赞数 1

分类专栏： # JavaScript 文章标签：懒加载 lazyload js

本文链接：https://blog.csdn.net/qq_36157085/article/details/88556107

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

背景：

之前自己做了一个视频网站（基于HLS的视频点播网站）。网站首页就包含了上百张图片，在本地开发时因为是本地资源所以没有发觉，但是将其部署到网站上后，发现首页加载完毕要20多s😂；并且切换路由时，由于上个路由时有了很多图片未下载完毕，导致当前页面一直处于卡顿状态，在等待图片下载。

所以，需要对网站的页面的图片进行懒加载处理。（项目是通过Umi.js开发的，当然懒加载的实现也是通过react，这里仅说明懒加载原理，就使用原生js了）

懒加载定义：

延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。

呈现形式：

延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。
条件加载，符合某些条件或者触发了某些条件才开始异步加载。
可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。

步骤：

1.将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

2.当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

HTML

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

JavaScript

<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
    var seeHeight = document.documentElement.clientHeight; //可见区域高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
    for (var i = n; i < num; i++) {
        if (img[i].offsetTop < seeHeight + scrollTop) {
            if (img[i].getAttribute("src") == "") { 
                img[i].src = img[i].getAttribute("data-src");
            }
            n = i + 1;
        }
    }
}
</script>

在图片加载完毕时，可以添加一个自定义属性。在每次执行时判断该属性，避免多次赋值；
如果是多个图片在一个div中，有多个div时，可以对div进行判断，满足条件则对当前div内的所有img进行加载。
如果图片加载失败了，就去修改图片的src为默认图片。需要通过事件代理，在div上监听onError函数，并进行处理

https://www.jb51.net/article/98410.htm

https://www.jb51.net/article/95872.htm