html5的loading属性用于实现图片和iframe的浏览器原生懒加载。其核心作用是通过设置loading="lazy"或loading="eager"控制资源加载时机，前者延迟加载至接近视口时才加载，后者立即加载，默认为eager。使用方式简单，在img或iframe标签中添加loading属性即可。兼容性方面，主流浏览器已支持，但对旧版本可采用polyfill如lazysizes库进行兼容处理，并通过data-src替换src及添加lazyload类实现。优化方面包括设置图片尺寸以避免重排、使用占位符提升体验、调整触发加载的距离、使用cdn加速、优化图片格式如webp。seo上需确保爬虫可访问图片，结合srcset实现响应式加载，配合结构化数据提升索引效果。总之，正确使用loading属性能显著提升页面性能与用户体验。
HTML5的Loading属性，本质上是为了让图片和iframe实现浏览器原生的懒加载。简单说，以前要靠JS库才能实现的效果，现在浏览器自己就能做了，而且更高效。
解决方案：
Loading属性有两个主要的值：lazy 和 eager。
立即学习“前端免费学习笔记（深入）”；
-
loading="lazy"：告诉浏览器，这个图片或iframe应该懒加载。只有当它接近视口时，才会被加载。 -
loading="eager"：立即加载资源，无论它是否在视口内。这个是默认值，所以通常不需要显式设置。
用法示例：
@@##@@
就这么简单，加上 loading="lazy" 属性，浏览器就会自动处理懒加载了。
浏览器兼容性问题
虽然 loading 属性很方便，但并不是所有浏览器都支持。目前主流浏览器基本都支持，但老版本可能不行。
如何处理兼容性？
-
渐进增强： 直接使用
loading属性，对于不支持的浏览器，图片或iframe会直接加载，不会影响基本功能。 -
使用polyfill： 可以使用polyfill库，例如lazysizes，它会自动检测浏览器是否支持
loading属性，如果不支持，就使用JS来实现懒加载。
Lazysizes示例：
首先，引入lazysizes库：
然后，修改HTML：
@@##@@
注意：
- 将
src属性改为data-src。 - 添加
lazyloadclass。
Lazysizes会自动找到带有 lazyload class的元素，并使用 data-src 中的URL进行懒加载。
如何优化懒加载效果？
仅仅使用 loading="lazy" 属性，或者使用Lazysizes，只能实现基本的懒加载。想要更好的用户体验，还需要进行一些优化。
优化技巧：
-
设置图片尺寸： 在
width和height属性，可以防止页面重排，提高加载速度。@@##@@
使用占位符： 在图片加载完成之前，显示一个占位符，避免页面出现空白。可以使用纯色、模糊图片或者SVG作为占位符。
调整触发距离： 默认情况下，浏览器会在图片接近视口时才开始加载。可以通过调整
loading属性的阈值，提前或延后加载。这个阈值无法直接通过HTML属性设置，但可以通过CSS或者JS来间接控制（例如，在使用Lazysizes时，可以通过配置来调整）。使用CDN： 将图片放在CDN上，可以提高加载速度，减少服务器压力。
图片格式优化： 使用WebP格式的图片，可以减小图片体积，提高加载速度。
懒加载对SEO的影响
懒加载虽然可以提高页面加载速度，但如果使用不当，可能会影响SEO。
SEO注意事项：
确保搜索引擎可以访问图片： 搜索引擎爬虫需要能够访问到图片，才能将其索引。如果使用JS来实现懒加载，需要确保搜索引擎可以执行JS代码。可以使用Google的移动设备适合性测试来检查页面是否可以被搜索引擎正确索引。
-
使用
srcset属性： 对于响应式图片，可以使用srcset属性来提供不同尺寸的图片，让浏览器根据屏幕大小选择合适的图片。这可以提高用户体验，也有利于SEO。@@##@@
使用结构化数据： 可以使用结构化数据来告诉搜索引擎图片的内容，这有助于提高图片在搜索结果中的排名。
总而言之，HTML5的 loading 属性提供了一种简单而高效的懒加载方式。但为了获得最佳效果，需要考虑浏览器兼容性、优化技巧以及SEO影响。正确使用懒加载，可以显著提高页面加载速度，改善用户体验。
