程序化检查延迟加载是否起作用

可以通过以下代码来检查延迟加载是否正常：

1. 调试输出模式

在调试输出模式下，我们可以直接查看网络请求日志，以确定内容是否已成功延迟加载。如下所示：

console.time('lazy load'); // 加载内容的代码... console.timeEnd('lazy load');

如果内容已经成功地延迟加载，我们将能够看到控制台上的“lazy load”的计时器结果。

2. Intersection Observer API

交叉观察器API是一种允许我们检测元素何时进入或离开另一个元素的视口的API。可以使用它来检查元素何时被加载。例如：

const img = document.querySelector('img'); const io = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; io.unobserve(entry.target); } }); }); img.dataset.src = 'lazy-image.jpg'; io.observe(img);

在这个例子中，我们使用IntersectionObserver API来检查图片是否已经进入了用户的视口。如果已经出现在视口中，则将它的src属性设置为懒加载图片的路径。