如何用 loading 属性实现图片懒加载
使用 loading 属性可以让浏览器自动推迟加载视口外的图片，从而缩短关键渲染路径并减少初始加载的数据量。
检查图片是否使用了 loading 属性
打开移动端页面的源代码，找到页面中所有的 <img> 标签。在浏览器开发者工具的 Elements 面板中，选中这些图片元素，查看其属性列表。确认是否存在 loading 属性，且其值是否为 'lazy'。如果图片标签中只有 src 和 alt 属性，而没有 loading 属性，说明该图片尚未启用懒加载功能。
对于已经使用了 loading 属性的图片，需要进一步确认其是否真正处于视口外。在开发者工具的 Console 控制台中输入 getBoundingClientRect() 方法，或者直接查看元素的位置信息。如果图片的 top 值大于当前视口的高度，或者 bottom 值小于 0，则说明该图片确实位于屏幕外，此时 loading='lazy' 才会生效。如果图片已经在屏幕内，浏览器会立即加载它，而不会推迟。
验证懒加载是否生效
在移动端设备或浏览器的移动调试模式下，向下滚动页面，直到视口外的图片进入可视区域。观察 Network（网络）面板，确认该图片的请求是否在图片进入视口后才发出。如果图片在页面刚加载时就发起了请求，或者滚动时没有新的请求发出，则说明懒加载未按预期工作。
使用 JavaScript 监听图片的加载状态来验证结果。在控制台中选中一个设置了 loading='lazy' 的图片元素，检查其 complete 属性。如果 complete 为 false，说明图片尚未加载完成；当图片进入视口并开始加载后，complete 会变为 true。此外，还可以检查图片的 naturalWidth 属性，如果其值为 0，表示图片尚未加载，加载完成后该值将变为图片的实际像素宽度。
确认浏览器兼容性
虽然 loading 属性是现代浏览器支持的原生功能，但并非所有浏览器都默认启用。在移动端，需要确认目标用户使用的浏览器版本是否支持该属性。如果用户使用的是非常旧的浏览器，可能需要通过 polyfill 来实现类似的功能，或者回退到传统的滚动监听方案。
如果发现某些浏览器不支持 loading 属性，可以检查页面是否加载了相关的 polyfill 脚本。例如，可以使用 Intersection Observer API 的 polyfill 来模拟懒加载行为。确保在代码中正确配置了 polyfill，以便在不支持原生属性的浏览器中也能实现推迟加载视口外资源的效果。
结合其他优化策略
除了使用 loading 属性，还可以结合 srcset 属性来进一步优化图片加载。通过为不同屏幕尺寸提供不同分辨率的图片，可以确保移动端设备加载最合适的图片大小，从而减少数据传输量。同时，确保图片的宽高属性已设置，以防止布局抖动。
对于视频和 iframe 等资源，同样可以使用 loading 属性来推迟加载。例如，在页面底部的视频播放器或嵌套的 iframe 中添加 loading='lazy'，可以避免这些资源在页面初次加载时占用带宽。这种方法特别适用于长页面或内容丰富的页面，能够显著提升首屏加载速度和用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。