loading属性

最新推荐文章于 2025-05-12 00:23:08 发布

LINGYI_WEN

最新推荐文章于 2025-05-12 00:23:08 发布

阅读量1.4k

点赞数 16

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_57837275/article/details/142522528

loading 属性是 HTML <img> 和 <iframe> 元素的一个属性，用于控制资源的加载行为。这个属性特别适用于改善网页的性能，特别是在首屏加载速度方面。loading 属性有三个可能的值：

1. auto
默认值。浏览器会根据自身的策略决定何时加载图像。对于 <img> 元素，这通常意味着图像会在页面加载时立即开始下载。

2. lazy
指示浏览器延迟加载图像，直到图像进入视口（即用户滚动到图像的位置）。这对于提高首屏加载速度非常有用，因为它可以减少初始页面加载时的网络请求和数据传输。

3. eager
指示浏览器立即加载图像，无论图像是否在视口内。这通常用于那些需要立即显示的图像。

示例（懒加载图像）

<img src="image1.jpg" alt="Example 1" loading="lazy">
<img src="image2.jpg" alt="Example 2" loading="lazy">
<img src="image3.jpg" alt="Example 3" loading="lazy">

立即加载图像

<img src="logo.png" alt="Logo" loading="eager">

使用场景
懒加载：适用于页面中有很多图像，但用户可能不会滚动到所有图像的情况。这样可以减少初始加载时间，提高用户体验。
立即加载：适用于那些必须在页面加载时立即显示的图像，例如页面的徽标或主要图像。

浏览器支持
loading 属性在大多数现代浏览器中都得到了支持，包括 Chrome、Firefox、Safari 和 Edge。对于不支持 loading 属性的浏览器，它们会忽略这个属性，按照默认行为加载图像。

JavaScript 检测和回退
如果需要在不支持 loading 属性的浏览器中实现懒加载，可以使用以下 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Images</title>
</head>
<body>
  <img src="placeholder.jpg" data-src="image1.jpg" alt="Example 1" class="lazy">
  <img src="placeholder.jpg" data-src="image2.jpg" alt="Example 2" class="lazy">
  <img src="placeholder.jpg" data-src="image3.jpg" alt="Example 3" class="lazy">

  <script>
    // 检查浏览器是否支持 loading 属性
    if ('loading' in HTMLImageElement.prototype) {
      // 浏览器支持 loading 属性
      const images = document.querySelectorAll('img.lazy');
      images.forEach(img => {
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        img.loading = 'lazy';
      });
    } else {
      // 浏览器不支持 loading 属性，手动实现懒加载
      const images = document.querySelectorAll('img.lazy');
      const config = {
        rootMargin: '50px 0px',
        threshold: 0.01
      };

      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
          }
        });
      }, config);

      images.forEach(img => {
        observer.observe(img);
      });
    }
  </script>
</body>
</html>