懒加载

懒加载是一种网页技术，它会推迟加载屏幕外的资源，直到这些资源即将进入视口。图片、iframe、视频乃至整个页面区块都可以使用懒加载。

浏览器通过 img 和 iframe 元素的 loading 属性原生支持懒加载，将该属性设为 lazy 即可，它由 HTML Living Standard 定义。网站也会用 JavaScript 实现懒加载，通常借助 IntersectionObserver API，它会在元素接近可见区域时发出通知。

资源加载完成前，页面会显示占位内容：空白方框、纯色块、模糊预览或加载动画。懒加载可以减少页面的初始体积，加快首屏显示。

懒加载的工作原理

1. 页面加载时，屏幕外的图片先以占位内容显示。
2. 浏览器或脚本持续监测每个占位内容的位置。
3. 用户滚动到附近时，才请求真正的文件。
4. 文件到达后，图片替换占位内容。

无限滚动把同样的思路用于内容：用户到达列表末尾时，再获取新的条目。

懒加载与截图

一次性渲染整个页面的整页截图不会滚动，因此首屏以下的懒加载内容可能根本不会被请求。结果中会出现空白方框或模糊预览。视口截图受到的影响较小，因为它只显示可见部分。

检测懒加载内容

• 检查整页截图的下半部分是否有空白或灰色方框。
• 手动滚动页面，观察是否有图片渐显出来。
• 在浏览器 DevTools 中检查图片元素的 loading 属性或占位图片来源。
• 将快速截取的结果与延迟后截取的结果进行比较。

在 Temposhot 的 Website Capture 中，将 Wait 设置为 Network idle，或添加 0-60 秒的延迟。Temposhot Full Page Screenshot 扩展会在截取时滚动当前页面，从而触发基于滚动的加载。

常见错误

• 在 load 事件触发时截取，并认为页面已经完整。
• 设置很长的延迟但不滚动页面，这对滚动触发的图片没有帮助。
• 把无限滚动页面当作“整页”截取，这样永远无法正常结束。
• 忽略模糊的占位图片，它们在小尺寸下看起来像已经加载完成。

需要反复截取相同的截图？

只需设置一次等待条件，即可在网站截图自动化中对每个 URL 重复使用。

常见问题

延长延迟能解决懒加载图片的问题吗？

当内容按定时器或在网络活动之后加载时，延长延迟有帮助。滚动触发的内容则需要滚动页面。

我应该在自己的网站上避免使用懒加载吗？

不必。懒加载可以提升速度。首屏图片应设为 eager，以便立即加载。

参考资料

• Lazy loading（维基百科）
• HTML Living Standard：URLs and fetching

相关资源

• Website Capture 选项：等待和延迟设置。
• 整页截图：截取页面的完整高度。