移动端图片懒加载失效？检查 loading 属性是否生效
检查图片是否应用了 loading 属性是验证懒加载是否生效的第一步，可以通过浏览器开发者工具的 Network 面板观察资源加载时机。
检查 HTML 标签是否包含 loading 属性
在移动端页面源代码中找到所有图片标签，确认是否添加了 loading 属性。根据 MDN 资料，loading 属性必须直接添加在 img、iframe、video 或 audio 元素上，才能指示浏览器推迟加载非关键资源。如果标签中缺少该属性，浏览器将默认按正常顺序加载所有图片，导致首屏资源量增加。检查时需注意，属性值通常设置为 lazy，这是浏览器识别懒加载的标准指令。
使用浏览器开发者工具的 Elements 面板定位图片元素，查看其属性列表。如果发现图片标签是空的，或者使用了旧的 JavaScript 库来实现懒加载，而没有使用原生的 loading 属性，则说明该功能未正确配置。对于移动端网页，确保所有非首屏的图片都添加了该属性，是减少初始网络请求量的基础。忽略这一步骤会导致后续的性能优化措施无法生效。
验证浏览器是否识别并推迟了图片加载
在开发者工具的 Network 面板中，过滤图片资源并刷新页面。观察非首屏图片的加载时间，如果它们在页面滚动到可视区域之前没有发起请求，则说明 loading 属性已被浏览器正确识别。MDN 提到，当元素处于屏幕外时，浏览器会推迟加载这些资源，直到用户滚动到附近。如果图片在页面刚加载时就立即显示在 Network 面板中，说明属性未生效或被脚本覆盖。
结合 Performance 面板查看资源加载瀑布流。如果首屏渲染时间缩短，且后续图片在滚动时才陆续出现，证明懒加载策略成功缩短了关键渲染路径。反之，如果所有图片都在初始加载阶段完成，则说明浏览器可能不支持该属性，或者页面被配置为强制加载所有资源。对于不支持的旧版浏览器，需要考虑使用 Intersection Observer API 或 polyfill 作为备选方案。
确认图片尺寸与视口的关系
检查图片的 width 和 height 属性是否设置正确，这直接影响浏览器判断图片是否在视口内。如果图片尺寸未指定，浏览器无法准确计算其在屏幕中的位置，可能导致 loading 属性失效。MDN 强调，图片的尺寸信息对于浏览器优化渲染至关重要。确保每个懒加载图片都有明确的宽高，可以防止布局抖动，并帮助浏览器更精确地判断何时开始加载。
使用开发者工具的 Layout 面板或截图对比，查看图片在页面中的实际显示大小。如果图片尺寸与 CSS 设置不一致，或者使用了百分比宽度但未指定最大宽度，可能导致浏览器误判其位置。正确的做法是为图片设置固定的像素宽高，或者使用 aspect-ratio 属性配合 width 和 height，确保浏览器能准确识别图片的占用空间，从而正确触发懒加载逻辑。
排查 JavaScript 是否阻止了懒加载行为
检查页面中是否有 JavaScript 代码在页面加载后强制请求图片资源。某些第三方脚本或广告插件可能会绕过浏览器的懒加载机制，直接发起网络请求。MDN 提到，虽然 loading 属性是浏览器原生的，但外部脚本可能会干扰这一过程。在 Console 面板中查看是否有异常的请求日志，或者使用断点调试，追踪图片加载的触发时机。
确认页面是否使用了 Intersection Observer API 或其他自定义的懒加载脚本，这些脚本可能与原生属性冲突。如果同时使用了多种懒加载方式，可能会导致资源被重复加载或加载逻辑混乱。建议优先使用原生的 loading 属性，因为它由浏览器内核直接管理，性能开销更低且兼容性更好。如果必须使用自定义脚本，应确保它不会覆盖或禁用图片上的 loading 属性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。