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 可以实现懒加载的功能，即在元素进入视窗之前不加载其内容，只有当元素可见时才加载相应的资源（如图片、视频等)
网友评论