懒加载会如何影响截图？

采用懒加载的图像和内容区块，只有在进入或接近视口时才会加载。如果截图前没有滚动页面或触发这些元素，成品中可能显示占位图、空白区域或低分辨率缩略图，而不是实际内容。

使用懒加载的页面可以截取整页截图吗？

可以，但截图工具必须先滚动完整个页面，触发全部懒加载元素。许多截图工具和无头浏览器脚本会自动滚动，让所有延迟内容在截图前完成加载。

懒加载会推迟加载页面上已经存在的资源，等它们接近视口时再加载。无限滚动则会在用户滚动到底部时加载全新的内容，例如新的项目或页面。两者都会延后加载，但无限滚动加入的内容原本不在页面结构中。

懒加载会减少首次加载时间，因此可以改善 Core Web Vitals，尤其是 Largest Contentful Paint，从而间接帮助 SEO。但如果实现不当，导致部分内容始终未渲染，搜索引擎也可能无法为其建立索引。

最简单的方法是在 img 和 iframe 元素上使用原生 loading='lazy' 属性。需要更精细的控制时，可以用 Intersection Observer API 检测元素何时进入视口，再以编程方式触发加载。许多框架（React、Next.js、Nuxt）也提供内置的懒加载组件。

懒加载是一种延迟加载技术，它会等图像、视频或内容区块即将出现在视口中时再加载，从而改善页面首次加载性能。

如果不使用懒加载，浏览器解析 HTML 后会立即下载页面上的每张图像、每段视频和所有其他资源，即使它们远在首屏下方，用户可能根本不会看到。对于包含数十张图像的长页面，这会浪费带宽，也会推迟页面进入可交互状态的时间。

懒加载改变了这一行为：资源会等到元素接近视口时再加载。最常见的实现方式有两种：

原生懒加载在 <img> 和 <iframe> 元素上使用 loading="lazy" 属性。浏览器会自行决定时机，在判断元素即将进入可见区域时开始获取资源，不需要 JavaScript。

Intersection Observer API 提供编程控制。JavaScript 观察器会监视目标元素，在它们进入或接近视口时触发回调。回调随后设置实际的 src 属性，替换占位符或 data 属性并开始下载。这种方式可以自定义阈值、触发动画，也能更细致地决定何时开始加载。

两种方式的目标相同：只有首屏内容会立即获取，其余资源随着用户滚动按需加载，因此页面首次打开更快。

懒加载给截图带来了一个具体问题。工具请求整页截图时，通常先在视口顶部渲染页面，再一次性截取整个文档的高度。首屏下方的懒加载元素尚未触发，因此可能显示为空容器、占位图或低分辨率缩略图。

解决办法是在截图前以编程方式滚动页面。无头浏览器脚本可以分段从顶部滚动到底部，每一步都短暂停留，让 Intersection Observer 回调触发并完成图像加载。到达底部后，脚本再滚回顶部，截取已经完整加载的页面。

部分截图工具会自动处理这一步，在截图流程中检测懒加载元素并滚动页面，无需手动操作即可得到内容完整的整页截图。

先确认页面是否使用懒加载，有助于决定如何截图。可以查看以下迹象：

loading="lazy" 属性——出现在 <img> 和 <iframe> 标签上，表示使用浏览器原生实现；
data-src 或 data-lazy 属性——常见做法是把实际图像 URL 存在 data 属性中，等元素进入视口后再由 JavaScript 写入 src；
占位图——较小、模糊或纯色的图像，滚动后会被完整图像替换；
使用 Intersection Observer——在页面 JavaScript 中查找监视图像或内容元素的 IntersectionObserver 实例；
框架专用组件——React 的 lazy()、Next.js Image 组件和类似的框架工具默认实现懒加载。

截图前没有滚动页面。 这是截取懒加载页面时最常见的问题。工具若不先滚完整个页面，首屏下方的图像就不会出现在输出中。
把加载阈值设得太晚。 如果元素已经可见后才触发加载，用户会先看到一闪而过的空白区域。应在元素即将进入视口时就开始加载。
对首屏内容使用懒加载。 页面首次打开时可见的图像和内容不应懒加载，否则会延迟用户最先看到的部分，并影响 Largest Contentful Paint。只应推迟加载首屏下方的资源。
忘记为禁用 JavaScript 的环境提供后备内容。 如果懒加载完全依赖 JavaScript，禁用 JavaScript 的用户和抓取程序将看不到任何图像。应提供 <noscript> 后备内容，或以原生 loading="lazy" 作为基础方案。