首页/文章/javascript

浅析图片懒加载(三种实现方法与两种优化方式)

2022-11-30

2223 字约 8 分钟

...

写在前面

上一篇文章介绍了防抖和节流，那么今天我们就来康康图片懒加载(中间会涉及到节流的优化问题)

你将了解到图片懒加载的实现的三种方法(整体位置比较和视图位置比较和observe)

和优化的两种方式(节流和IntersectionObserver)

写得不对的地方，希望大家能够批评指正！

在不使用图片懒加载的情况下,我们打开开发者工具康康

这里display给block是为了让图片变成块元素，这样图片会自己换行，这样更方便后面进行懒加载的操作
注意勾选禁用缓存，和慢速3G，这样效果更加明显

`<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> img {
      display: block;
      width: 100px;
      height: 100px;
      margin-top: 20px;
    } </style>
</head>

<body>
  <p>今天介绍一下图片懒加载</p>
  <img src="./pic/1.png" alt="">
  <img src="./pic/2.png" alt="">
  <img src="./pic/3.png" alt="">
  <img src="./pic/4.png" alt="">
  <img src="./pic/5.png" alt="">
</body>

</html>` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)

我们很容易看出，由于图片的加载时间很长，首屏的渲染用了7s完成
下面我们就来看看懒加载和懒加载的优化吧！
康康最后通过优化能提升多少性能！

什么是懒加载？

这里就来介绍一下懒加载

简单来说，就是懒惰的加载明日复明日
在首屏渲染，如果我的可视区域里面看不到图片，那就先不加载图片
这种合理的偷懒就是懒加载，它大大缩减了首屏的渲染时间

懒加载的前两种实现方法(位置判断)

获取图片元素，图片的src属性改为data-src，即src属性为空

`<img data-src="./pic/1.png" alt="">
  <img data-src="./pic/2.png" alt="">
  <img data-src="./pic/3.png" alt="">
  <img data-src="./pic/4.png" alt="">
  <img data-src="./pic/5.png" alt="">`

添加滚动事件监听，判断图片位置和当前位置来给src赋值，从而达到了动态加载图片的效果
这个距离的判断又有大概两种，下面来分析一下

1.通过整体距离来判断

通过下图，我们可以知道
- 一个图片元素的位置的顶部可以用offsetTop属性获得
- 如果把div换成文档对象，scrollTop+clientHeight就可以表示滚动距离的最下端
- 故offsetTop<scrollTop+clientHeight的时候我们就要改变图片的src了
- 注意上面的offsetTop和后面的scrollTop+clientHeight是针对不同的元素哦，前者是图片，后者是文档对象
- document.documentElement会返回一个文档对象

故代码如下:

`const images = document.querySelectorAll('img')
    n = 0
    let lazyload = (e) => {
      const clientHeight = document.documentElement.clientHeight
      const scrollTop = document.documentElement.scrollTop
      for (let i = n; i < images.length; i++) {
        if (images[i].offsetTop < clientHeight + scrollTop) {
          images[i].setAttribute('src', images[i].getAttribute('data-src'))
          n = i + 1
        }
      }
      console.log('scroll触发');
    }`

2.通过视口距离来判断

与上面的方法不同的是，我们不去管整体滚动了多少，图片相对于整体的offset位置是多少
我们只去关心视口的距离
getBoundingClientRect().top可以帮我们获得图片相对于视口距离顶部的距离
window.innerHeight可以帮我们获得视口的高度(一般来说，对一个设备来说是一个固定值!)

`const images = document.querySelectorAll('img')
    let n = 0
    let lazyload = (e) => {
      for (let i = n; i < images.length; i++) {
        const imageTop = images[i].getBoundingClientRect().top
        if (imageTop < window.innerHeight) {
          images[i].setAttribute('src', images[i].getAttribute('data-src'))
          n = i + 1
        }
      }
      console.log('scroll触发');
    }`

3.两种距离判断方法的比较示意图

为了更好地帮助大家理解这个判断的区别，我画了一个示意图

为什么要优化懒加载

在前面的懒加载函数中，我们写了一个log
好，现在我们去控制台看一下输出

scroll多次监听事件多次触发，这是我们不愿意看到的

懒加载的两种优化方式

懒加载的优化本质上就是减少监听事件的调用

节流

在上一篇文章里面提到了节流，我们直接拿节流函数过来用

`function throttle (fn, delay) {
      let pre = 0
      let timer
      return function () {
        if (!pre) pre = new Date()
        let now = new Date()
        let context = this
        let args = arguments
        let remainTime = delay - (now - pre)
        if (now - pre > delay) {
          fn.apply(context, args)
          pre = now
        } else {
          if (timer) return
          timer = setTimeout(() => {
            fn.apply(context, args)
            pre = now
            timer = null
          }, remainTime)
        }
      }
    }
    window.onscroll = throttle(lazyload, 1000)` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)

我们看控制台可以明显看到调用次数减少了
虽然完成了所有的懒加载后，但是我们仍然可以触发事件，所以才有了第二种优化方式

IntersectionObserver(第三种实现方法,同时是第二种优化方式)

IntersectionObserver是什么？
- 允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有一部分元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。
- 所以它完美契合了懒加载！
我们从代码中来学习它的用法吧！

`const images = document.querySelectorAll('img')
    const callback = (entries) => {
      entries.forEach(entry => {
        console.log(entry)
        if (entry.isIntersecting) {            // 监听到出现
          const image = entry.target           // 获取目标
          image.setAttribute('src', image.getAttribute('data-src'))
          observer.unobserve(image)            // 取消监听
          console.log('触发');
        }
      })
    }
    const observer = new IntersectionObserver(callback)
    images.forEach(image => {
      observer.observe(image)
    })` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)

函数中log entry，我们主要是康isIntersecting属性来判断是否出现

通过这个优化方式，几张图片就会触发几次，不会多次触发！
observer会监听交叉状态，即出现和消失，出现交叉状态后会去调用new的时候传入的callback回调函数
- observer.observe添加交叉监听
- observer.unobserve取消交叉监听
- 上面这两个api基本够用了
- 给每张图片添加observe
- callback里面判断交叉出现，就给src赋值然后unobserve

最后,我们看一下优化后懒加载能提高多少性能

从第一次渲染加载5张图片变成了加载2张图片
请求的总耗时从7s降到了6s
从我自己实验打开，还是明显感觉到要快一些了的(当然是在3G慢速模式下)

总结

1.前两种方法存在多次触发问题，所以我们可以使用节流来优化
2.第三种方法自己就考虑的优化(所以第三种方法也就是第二种优化方式)
3.咋一看，第三种方法是可以取代前两种方法的
- 但是，有的浏览器不兼容第三种方法的时候，我们就只能老老实实使用前两种方法并节流优化了

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →

javascript2026-02-24

navigator.sendBeacon全指南

在前端开发中，埋点系统是必不可少的一环。我们经常需要在用户关闭页面、刷新或跳转路由时，向服务器发送最后一条统计数据（比如用户停留时长、页面跳出率）。但这看似简单的需求，在实现时却危机四伏：请求发不出去？页面跳转卡顿？今天我们就来聊聊这个问题的终极解决方案 —— 。一、痛点与传统方案的挣扎场景还原当用户点击关闭按钮时，浏览器会触发生命周期事件（或）。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求，浏览...

javascript2025-11-02

理解浏览器事件系统,从用户点击到事件对象的完整旅程

深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象作为前端开发者，我们每天都在写这样的代码：这段代码如此熟悉，以至于我们很少停下来思考：这个对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？更神奇的是，当我们手动创建事件时：...

javascript2025-10-01

实现大文件上传全流程详解

在日常开发中，大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件，直接上传不仅容易超时，还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中。一、先看效果：我们要实现什么？先上核心功能清单，确保大家明确目标，知道我们要解决哪些实际问题：大文件分片上传：将文件切成固定大小的小片段分批上传，避免单次请求超时秒传：服务器已存在完整文件时，直接返...

javascript2025-09-18

JavaScript 的多线程能力：Worker

如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？答案很简单：把这...

javascript2025-09-15

一张 8K 海报差点把首屏拖垮

你给后台管理系统加了一个「企业风采」模块，运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s，LCP 红得发紫。老板一句「能不能像朋友圈那样滑到哪看到哪？」——于是你把懒加载重新翻出来折腾了一轮。解决方案：三条技术路线，你全踩了一遍 1\. 最偷懒：原生一行代码就能跑，浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖，IE 全军覆没。必须写死，否则 CLS 会抖成 PPT。适用场景...

javascript2025-09-10

🚀 Web Worker让你的应用丝滑

🌟 引言在日常的前端开发中，你是否遇到过这样的困扰：大数据处理时页面卡死：处理几万条数据时，页面直接卡成PPT，用户点击毫无反应复杂计算阻塞UI ：图片处理、数据分析等计算密集型任务让整个应用假死文件上传/下载卡顿：大文件操作时，其他功能完全无法使用实时数据处理性能差：WebSocket接收大量数据时，页面渲染严重滞后今天分享6个Web Worker的核心技巧，让你的应用告别卡顿，用户体验丝滑如德芙！ 💡 核心技巧...

评论

请登录后发表评论

加载评论中...

目录