应用程序大小和文件请求的一半用于加载图像。如果您想使应用程序更快，更轻便，那么考虑图像优化是一个很好的起点。
您可以通过延迟加载图像来加快应用程序的速度。仅当它们出现在设备的视口中或附近时才显示它们。可以使用Intersection Observer API来完成。
Intersection Observer
它是一种性能API，可在元素进入或离开视口时通知您。在隐藏或显示元素时获取信息非常有用。您可以将其用于分析，以通过查看当前元素来跟踪用户花费了多少时间，可以在视频到达视图中的特定点时开始或停止视频，或者在滚动到底部时加载更多内容（例如图像）页面的。
Intersection Observer是跟踪滚动事件的非常有效且完美的工具。
要使用Intersection Observer，我们调用构造函数并传递一个回调函数。该回调将在观察到的每个元素上运行。为了观察特定的元素，我们选择它们并observe在每个元素上调用方法：
<head>
<style>
.box {
border: 1px solid;
height: 400px;
width: 500px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<script>
const io = new IntersectionObserver((entries) =>
entries.forEach((entry) =>
console.log(
entry.target.innerText + " entered the view: " + entry.isIntersecting
)
)
);
document.querySelectorAll(".box").forEach((element) => io.observe(element));
</script>
</body>
如果运行此代码并检查浏览器控制台，则应该看到所有div元素都已注册，并且在滚动页面时，每个元素在进入和离开视口时都会输出输出。
延迟加载图像
当浏览器在image标签中检测到source属性时，它将从路径中下载，解析和渲染。通过操纵源和数据集属性，我们可以决定何时显示图像。
延迟加载图像的想法是：
- 删除图像
src属性或添加占位符 - 将源链接放在
dataset属性中 - 在图像上调用 intersection observer
- 当检测到相交时，从数据集中获取源并将其放置在
src
数据集属性是存储其他信息以供以后访问的理想位置。通过将实际的图像路径放在中data-src，然后选择它并将其设置为src属性，我们将加载图像。
<body>
<img class="lazy" data-src="lazy-image.jpg">
<img class="lazy" data-src="lazy-image.jpg">
<img class="lazy" data-src="lazy-image.jpg">
<script>
const io = new IntersectionObserver((entries) =>
entries.forEach((entry) => {
// set image source only when it is in the viewport
if (entry.isIntersecting) {
const image = entry.target;
// setting image source from the dataset
image.src = image.dataset.src;
// when image is loaded, we do not need to observe it any more
io.unobserve(image);
}
})
);
document.querySelectorAll(".lazy").forEach((element) => io.observe(element));
</script>
</body>
这是如何仅使用纯JavaScript来延迟加载图像的最简单示例。
需要考虑的事情
图像标签的大小由图片定义。如果您没有为其指定尺寸，或未为该src属性放置占位符，则所有图像的大小均为0px，并由观察者立即加载。
Intersection Observer API主要用于所有现代浏览器。但是，如果您需要对较旧版本的支持，则应使用polyfill。同样，一个好的方法是首先检查浏览器是否具有Intersection Observer。如果没有，请运行后备代码。
结论
使用图像延迟加载将使页面更轻，加载时间更快，浏览器资源的使用更少，并使用户体验更加愉悦。
网友评论