html img标签的loading属性可用于懒加载图片

loading 属性是 HTML <img> 标签的一个属性，用于指示浏览器何时加载图像资源。它有助于优化页面加载性能，特别是对于包含大量图片的页面。通过延迟加载（lazy loading）不在视口内的图片，可以显著减少初始页面加载时间，并提高用户体验。

loading 属性的值

loading 属性支持以下三个值：

1. lazy：延迟加载图像，即仅在用户滚动到接近图像的位置时才加载图像。适用于大多数不在视口内的图像。
2. eager：立即加载图像，无论图像是否在视口内。适用于希望尽快加载的关键图像，如首屏内容中的图片。
3. auto：浏览器决定是否延迟加载图像。这是默认行为，通常等同于 lazy，但具体实现可能因浏览器而异。

使用示例

延迟加载（Lazy Loading）

<img src="example.jpg" alt="Example Image" loading="lazy">

在这个例子中，loading="lazy" 表示只有当用户滚动页面接近该图片位置时，浏览器才会开始加载这张图片。

立即加载（Eager Loading）

<img src="important-image.jpg" alt="Important Image" loading="eager">

在这个例子中，loading="eager" 表示无论图片是否在视口内，浏览器都会立即加载这张图片。

实际应用中的注意事项

1. 兼容性：现代浏览器（包括 Chrome、Firefox、Edge 和 Safari）都支持 loading 属性。然而，如果你需要支持较旧的浏览器，你可能需要使用 JavaScript 库（如 lazysizes）来实现类似的功能。

2. 占位符和渐进式加载：为了提升用户体验，你可以为延迟加载的图片设置一个占位符或低分辨率的预览图。这样，在图片完全加载之前，用户可以看到一个替代的内容。

   <img src="low-res-example.jpg" data-src="example.jpg" alt="Example Image" loading="lazy" class="lazyload">
   

   结合 CSS 或 JavaScript 可以进一步优化显示效果。

3. SEO 考虑：确保所有图片都有适当的 alt 属性描述，这对于搜索引擎优化（SEO）和可访问性都很重要。

4. JavaScript 回退：尽管 loading 属性已经被广泛支持，但在某些情况下，你可能仍然希望通过 JavaScript 提供回退机制。

   document.addEventListener("DOMContentLoaded", function() {
       var lazyImages = [].slice.call(document.querySelectorAll("img[loading=lazy]"));
       if ("IntersectionObserver" in window) {
           let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
               entries.forEach(function(entry) {
                   if (entry.isIntersecting) {
                       let lazyImage = entry.target;
                       lazyImage.src = lazyImage.dataset.src;
                       lazyImage.srcset = lazyImage.dataset.srcset;
                       lazyImage.classList.remove("lazy");
                       lazyImageObserver.unobserve(lazyImage);
                   }
               });
           });
   
           lazyImages.forEach(function(lazyImage) {
               lazyImageObserver.observe(lazyImage);
           });
       } else {
           // Fallback for browsers that do not support IntersectionObserver
           lazyImages.forEach(function(img) {
               img.src = img.getAttribute('data-src');
           });
       }
   });
   

总结

loading 属性是一个简单且有效的工具，用于控制网页中图片的加载策略。通过合理地使用 lazy 和 eager 值，可以显著改善页面的加载性能和用户体验。同时，考虑到浏览器的兼容性和其他因素，必要时可以结合 JavaScript 进一步增强功能。