不是哥们！仅需一行HTML代码便可实现懒加载?😒，确定不点进来看看吗？🚀

开篇废话:终于把所有的亲戚走完了，一个月了😭终于有时间写文章了。你们的CSS大师又回来辣

懒加载，这是很多人对自己网页优化的一种手段。

作者，作者，你的懒加载还是太吃操作了，有没有简单又强势的方法推荐一下？🤔

有的兄弟有的，接下来让我们有请出loading="lazy"

我也看到有人写了它，但是没有讲到精髓，并且我使用了没有作用。接下来跟我一起真正学习他。
全文不长，耐心观看（叠个甲，作者才大二能力有限，如有错误，轻点喷🙏）

开始

我这里准备了几张图片

html 复制代码

  <img src="./13.png" alt="">
  <img src="./pexels-baskincreativeco-1766838.jpg" alt="">
  <img src="./pexels-david-besh-884788.jpg" alt="">
  <img src="./pexels-dreamypixel-547115.jpg" alt="">
  <img src="./pexels-eberhardgross-1428277.jpg" alt="">
  <img src="./pexels-iriser-1379636.jpg" alt="">
  <img src="./pexels-pok-rie-33563-2049422.jpg" alt="">
  <img src="./pexels-sebastiaan9977-1097456.jpg" alt="">

可以看到我们在不做任何优化的情况下消耗的资源非常大。

遇到这种情况，很多人就会选择使用懒加载的方式进行优化(这里默认大家都懂懒加载是什么，就不深入讲解了)

这里我们使用loading="lazy"来进行，睁大好你的眼睛👀

html 复制代码

  <img src="./13.png" alt="" loading="lazy">
  <img src="./pexels-baskincreativeco-1766838.jpg" alt="" loading="lazy">
  <img src="./pexels-david-besh-884788.jpg" alt="" loading="lazy">
  <img src="./pexels-dreamypixel-547115.jpg" alt="" loading="lazy">
  <img src="./pexels-eberhardgross-1428277.jpg" alt="" loading="lazy">
  <img src="./pexels-iriser-1379636.jpg" alt="" loading="lazy">
  <img src="./pexels-pok-rie-33563-2049422.jpg" alt="" loading="lazy">
  <img src="./pexels-sebastiaan9977-1097456.jpg" alt="" loading="lazy">

可以发现，我的天呐😱，它没有任何变化！！😱😱😱

无论你怎么缩小视口大小，它总是全部加载（我不知道不同浏览器会不会情况不同，这里大家自行验证）

这是怎么回事呢？这其实也是很多文章没有讲到的地方🤔

这其实并非浏览器的错误，只是我们还没有完成要懒加载的要求

因为系统需要知道我们图像要多大来保证空间当我们图像缺失的时候，我们的设计不会破裂

不明白？没关系😄，记住结论就行

解决方法就是：我们需要明确指定宽高信息

注意是明确指定！⚠️宽和高任意一个信息缺少都将失去作用！⚠️

我们给每一个img都指定宽高信息

css 复制代码

    img {
      width: 2000px;
      height: 2000px;
    }

可以发现懒加载已经生效

总结

我们通过loading="lazy"一行html实现懒加载，但是需要明确指定宽高信息(缺一不可)

（这些结论大家自行尝试即可，这里就不给大家一一演示了，反正就是个懒加载功能🕶）

loading="lazy"加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系。
loading="lazy"加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。
loading="lazy"加载没有缓冲，滚动即会触发新的图片资源加载。
loading="lazy"加载在窗口resize尺寸变化时候也会触发，例如屏幕高度从小变大的时候。
loading="lazy"加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。