移动端图片懒加载为何首屏加载变慢？检查 loading 属性与 load 事件
浏览器在首屏加载完成后触发 load 事件时，视口内可能仍有未加载的懒加载图片，导致页面交互延迟。
检查图片是否在 load 事件触发后完成加载
浏览器在 eagerly-loaded 内容全部加载完毕时触发 load 事件，此时视口内可能存在尚未加载的懒加载图片、iframe、视频或音频。若页面依赖 load 事件进行后续交互或统计，需确认视口内懒加载资源是否已加载完成。可以通过检查图片元素的 Boolean complete 属性来判断其是否已加载完毕。
在代码中，可以通过遍历视口内的图片元素并读取其 complete 属性来验证加载状态。如果 complete 为 true，表示图片已加载；如果为 false，则表示图片仍在加载或尚未开始加载。此检查应在 load 事件触发后进行，以确保获取的是最新的加载状态。
使用 Intersection Observer 监听元素进入视口
Intersection Observer API 允许开发者监听元素是否进入或离开浏览器视口。对于懒加载资源，可以使用此 API 在元素进入视口时触发加载逻辑，从而更精确地控制资源的加载时机。这比依赖滚动事件或 resize 事件来手动判断元素是否在视口中更为高效。
在使用 Intersection Observer 时，需要设置一个回调函数，该函数会在目标元素进入视口时被调用。回调函数中可以执行加载资源的操作，例如设置图片的 src 属性或触发 iframe 的加载。通过这种方式，可以确保资源仅在用户需要时加载，从而优化页面性能。
检查浏览器兼容性并使用降级方案
当浏览器兼容性至关重要时，可以使用 polyfill 来支持 Intersection Observer API。如果没有 polyfill，可以回退到使用滚动、调整大小或方向改变事件处理器来手动判断元素是否在视口中。这些事件处理器虽然性能较低，但在不支持 Intersection Observer 的环境中仍然可用。
在实现降级方案时，需要确保在滚动或调整窗口大小时，能够正确检测元素是否进入视口。可以通过计算元素的位置与视口位置的关系来实现这一点。虽然这种方法不如 Intersection Observer 高效，但它可以确保在旧浏览器中也能实现基本的懒加载功能。
验证懒加载效果与性能优化
为了验证懒加载的效果，可以在页面中添加多个图片，并设置 loading 属性为 lazy。然后使用开发者工具监控网络请求，确认图片仅在滚动到视口附近时才开始加载。同时，检查 load 事件触发后视口内图片的加载状态，确保 complete 属性正确反映加载情况。
通过对比启用懒加载前后的页面加载时间和网络使用情况，可以评估懒加载策略的有效性。如果发现首屏加载时间没有明显改善，可能需要检查图片的尺寸、网络状况或懒加载的实现方式。确保非关键资源仅在需要时加载，以减少初始页面加载时的网络使用和渲染阻塞。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。