前端性能优化之图片懒加载

最新推荐文章于 2024-04-01 03:05:10 发布

ronghua_yang

最新推荐文章于 2024-04-01 03:05:10 发布

阅读量449

点赞数

分类专栏：图片优化文章标签：图片优化

本文链接：https://blog.csdn.net/qq_43327962/article/details/111145871

版权

在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。

为什么要进行图片懒加载

我们先来看一下页面启动时加载的图片信息。
在这里插入图片描述
如图所示，这个页面启动时加载了几十张图片（甚至更多），而这些图片请求几乎是并发的，在 Chrome 浏览器，最多支持的并发请求次数是有限的，其他的请求会推入到队列中等待或者停滞不前，直到上轮请求完成后新的请求才会发出。所以相当一部分图片资源请求是需要排队等待时间的。

在上面可以看出，有部分图片达到几百 kB，设置 2M(这锅必须运营背，非得上传高清大图不可？)，直接导致了加载时间过长。

针对以上情况，进行图片懒加载有以下优点：

减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动。
能提升用户的体验，不妨设想下，用户打开页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长这就严重影响用户体验。

图片懒加载的原理

图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的

拿到所有的图片 dome 。
遍历每个图片判断当前图片是否到了可视区范围内。
如果到了就设置图片的 src 属性。
绑定 window 的 scroll 事件，对其进行事件监听。

我们先来看下页面结构

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lazyload</title>
    <style>
      img {
    
        display: block;
        margin-bottom: 50px;
        height: 200px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <img src="./img/default.png" data-src="./img/1.jpg" />
    <img src="./img/default.png" data-src="./img/2.jpg" />
    <img src="./img/default.png" data-src="./img/3.jpg" />
    <img src="./img/default.png" data-src="./img/4.jpg" />
    <img src="./img/default.png" data-src="./img/5.jpg" />
    <img src="./img/default.png" data-src="./img/6.jpg" />
    <img src="./img/default.png" data-src

最低0.47元/天解锁文章

ronghua_yang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端性能优化之图片懒加载

在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。如图所示，这个页面启动时加载了几十张图片（甚至更多），而这些图片请求几乎是并发的，在 Chrome 浏览器，最多支持的并发请求次数是有限的，其他的请求会推入到队列中等待或者停滞不前，直到上轮请求完成后新的请求才会发出。所以相当一部分图片资源请求是
复制链接

扫一扫