HTML<img>加载属性

在本文中，我们将讨论 HTML img 加载属性。此属性处理如何在网页上加载图像。它接受三个字符串值，即 auto、eager 和 lazy。

延迟加载属性：此策略用于将资源标识为非关键资源，仅在需要时才加载资源。换句话说，只要不需要，延迟加载就会加载网页内容。这种技术有助于优化页面并允许它们稍后加载。通常，网页上的图像尺寸较大。为此，延迟加载可用于延迟屏幕外图像。请参阅什么是延迟加载？文章。

句法：

属性值：

• auto：它是浏览器默认的延迟加载行为，浏览器将决定内容的延迟加载。
• 急切：对应的图像将立即加载，即，无论它位于页面上的哪个位置，它都会立即加载资源。
• 懒惰：它会延迟加载与其对应的图像，直到浏览器指定它很快就会出现。它可以帮助优化网页的加载时间，通过推迟加载图像，直到它们预期出现，而不是立即加载它们。

我们将使用这些属性值通过示例查看每种情况下的更改。

示例 1：此示例说明了 lazy 属性的使用。

HTML

  
  
  

  

  
Lazy Loading Attribute
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

输出：

示例 2：此示例说明了自动和预先加载属性的使用。

HTML

  
  
  


  
Auto Loading Attribute
  
  
  
  
  
  
  
  
  
  
  
  
  
  
Eager Loading Attribute
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

输出：

注意：在 chrome 等浏览器中，图像加载是即时的，因此您可能无法区分它。但是加载时间得到了优化。

支持的浏览器：

• Chrome 77.0 及以上
• Edge 79.0 及以上
• 火狐 92.0 及以上