外贸网站常用图片属性loading="lazy"延迟请求加载资源

HTML元素延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素，根据用户滚动操作至其元素附近执行加载，一定程度起到节流的作用。

在chrome 76以后的版本中，出现了一种loading="azy"的属性，这个属性让img实现懒加载效果：

<img src="zhiyuanblog.png" loading="lazy" alt="李志远博客" />

但是这个属性的真是表现可能和我们想的还不太一样。

img属于要设置宽/高

因为懒加载的原理就是利用图片的高度和视区的高度进行计算，如果图片没有设置高度，那么就是0，那么无论放多少个图片，都视为在视区范围内，会立马加载。

设置宽高属性方法1

  <img src="xiaquer1.png" loading="lazy" width="760" height="450" alt="李志远博客"/>  <img src="zhiyuanblog2.png" loading="lazy" width="760" height="450" alt="李志远博客"/>  <img src="zhiyuanblog3.png" loading="lazy" width="760" height="450" alt="李志远博客"/>

设置宽高属性方法2

 <style>      img{width:760px;height:450px;}  </style>  <img src="zhiyuanblog1.png" loading="lazy" alt="李志远博客"/>  <img src="zhiyuanblog2.png" loading="lazy" alt="李志远博客"/>  <img src="zhiyuanblog3.png" loading="lazy" alt="李志远博客"/>

其他

1.loading="eager"是loading="lazy"的相反操作，意思就是不懒加载，直接去加载。

2.如何判断浏览器是否支持loading="lazy"属性：

  var isSupportLoading = 'loading' in HTMLImageElement.prototype;

3.目前loading="lazy"只有chrome 76+才支持，适合外贸网站。

4.此属性也可以应用在<iframe>标签上。阅读&ldquo;iframe懒加载&rdquo;