1. 前言
- 之前写了react 图片懒加载的简单实现 ,vue的没找到
- 最近看了些博客又有新的理解 记录下
2. 是什么 what
- 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。
- 因为现在都是5G网络普及了 图片,视频都已经在网站 是非常常见的了,但是呢他们也一直是影响网页性能的主要元凶，现在一张图片,视频超过几M已经是很经常的事了。
如果每次进入页面就请求所有的图片,视频资源，那么可能等图片,视频加载出来用户也早就走了。
所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源
3. 最简单的实现方式是 html
- 哈哈给 img加个 loading 属性 ,现在大多数浏览器也都支持
loading支持情况.png
<img src="./yzs.png" loading="lazy">
4. js 实现
- react 图片懒加载的简单实现 这里的大体思路
- 设置占位图
- 监听window 的 scroll 事件
- 遍历每个图片判断当前图片是否到了可视区范围内
- 如果到了就设置图片的 src 属性
- 优化
scroll事件会在很短的时间内触发很多次，严重影响页面性能，为了提高网页性能，我们需要一个节流函数来控制函数的多次触发，在一段时间内（如 200ms）只执行一次回调
5. IntersectionObserver
- IntersectionObserver -MDN 定义
- 简单来说就是可以自动"观察"元素是否可见
- 由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"
构造函数
- IntersectionObserver()
- 创建一个新的 IntersectionObserver 对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。
let io = new IntersectionObserver(callback, option) // 开始观察 io.observe(document.getElementById('example')) // 停止观察 io.unobserve(element) // 关闭观察器 io.disconnect()
懒加载的实现
核心代码
data-src占位图属性
<!DOCTYPE html> <html> <head> <style> /* 假设图片的占位符具有固定的高度 */ .placeholder { height: 200px; background-color: #eee; } </style> </head> <body> <div id="container"> <div class="placeholder"></div> <img class="lazy-image" data-src="image.jpg" alt="Lazy Image"> <div class="placeholder"></div> <img class="lazy-image" data-src="image2.jpg" alt="Lazy Image 2"> </div> <script> // 获取所有的懒加载图片元素 const lazyImages = document.querySelectorAll('.lazy-image'); // 创建 IntersectionObserver 实例 const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { // 当元素进入视窗时加载图片 if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy-image'); observer.unobserve(img); // 停止观察已加载的图片 } }); }); // 遍历每个懒加载图片元素，并开始观察 lazyImages.forEach(image => { observer.observe(image); }); </script> </body> </html>
使用 IntersectionObserver 可以实现懒加载的功能，即在元素进入视窗之前不加载其内容，只有当元素可见时才加载相应的资源（如图片、视频等)
