【网页性能优化】-—— 关于图片懒加载

---

前言

提示：这里可以添加本文要记录的大概内容：

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两点：

• 全部加载的话会影响用户的体验
• 浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量

---

提示：以下是本篇文章正文内容，下面案例可供参考

实现方式

html实现

最简单的实现方式是给 img 标签加上 loading="lazy"' ，比如

<img src="./example.jpg" loading="lazy">

该属性的兼容性还行，大家生产环境可以使用

js实现

我们通过js监听页面的滚动也能实现。
使用js实现的原理主要是判断当前图片是否到了可视区域：

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

在页面初始化的时候，<img> 图片的 src 实际是放在 data-src 属性上的，当元素处于可视范围内的时候，就把 data-src 赋值给 src 属性，完成图片懒加载。

// 在一开始加载的时候
<img data-src="http://xx.com/xx.png" src="" />

// 在进入可视范围内时
<img data-src="http://xx.com/xx.png" src="http://xx.com/xx.png" />

<div> 使用背景图来实现，原理也是一样的，把 background-image 放在可视范围时，就把 data-src 赋值给src属性，完成图片加载

// 在一开始加载的时候
<div
	data-src="http://xx.com/xx.png"
	style="background-image: none; background-size: cover;"
></div>

// 在进入可视范围内时
<div
	data-src="http://xx.com/xx.png"
	style="background-image: url(http://xx.com/xx.png); background-size: cover;"
></div>

下面展示一个demo：

<html