后端开发教程 - Java、Spring Boot 实战 - msg200.com
无需 JavaScript 即可实现原生图像延迟加载
关于延迟加载以及为什么要使用它
旧方法（Javascript）
新的（HTML）方法
关于延迟加载以及为什么要使用它
过去几十年来，互联网不断发展，如今的网站不仅包含文字和色彩，还包含无数的媒体内容。其中，最重要的莫过于图像。
<img src="/path/to/your/image.jpg" alt="Awesome image" />
但这与延迟加载有什么关系？
延迟加载是一种在页面加载时延迟加载非关键资源的技术。这些非关键资源会在需要时加载。就图片而言，“非关键”通常与“屏幕外”同义。——
摘自Jeremy Wagner 和 Rachel Andrew 撰写的web.dev/lazy-loading
这意味着通过使用延迟加载，我们可以比传统的 HTML 嵌入获得以下好处：
- 性能提升- 通过延迟加载，我们可以减少最初需要加载的图像数量来提高加载速度。
- 降低成本——延迟加载的图像可能永远不需要加载，因为用户永远不会到达页面上的图像位置。
好的，听起来不错。我们该如何实现呢？我们需要做些什么呢？让我们开始吧！
旧方法（Javascript）
有很多像vanilla-lazyload这样的代码片段和脚本可以通过 JavaScript 实现延迟加载。几乎所有情况下，都会使用 data 属性来阻止图片提前加载。
html
<img data-src="/path/to/your/image.jpg" alt="Awesome image" />
但是图像究竟是如何加载的呢？为了实现这一点，通常使用以下两种技术之一。
事件监听器
此技术在浏览器中使用 scroll、resize 和 orientationChange 事件监听器。如果触发上述任一事件，并假设图像进入视口，则 data-src 属性将被 src 属性替换，从而触发加载调用。查看实际效果：
交叉口观察器 API
与第一种方法不同，我们使用IntersectionObserver API异步观察图像。图像进入视口后，立即通过更改data-srcto属性来加载。src
但如果我告诉你，你根本不需要 JavaScript 呢？😲 是的，你没听错！零 JavaScript。
新的（HTML）方法
那么这种新的延迟加载方式是什么样的呢？不用担心，它非常简单。你只需要添加loading="lazy"到图片标签中就可以了。😎
<img src="/path/to/your/image.jpg" loading="lazy" />
有了这项新的加载属性，你可以完全推迟屏幕外图片（甚至某些浏览器中的 iframe）的加载，直到它们进入视口。废话不多说，让我们来看看实际效果！
该属性有三个值：
- 自动- （默认）等于不包括该属性。
- lazy——推迟资源加载，直到进入视口。
- eager - 立即加载资源
浏览器支持情况如何？
几乎所有主流浏览器（Chrome、Edge、Opera 和 Firefox）都支持该属性。Safari 的实现正在进行中，并且即将完成。如果您需要更多关于跨浏览器支持的详细信息，caniuse.com是您的好帮手。
如果浏览器不支持该属性会发生什么？
不支持loading属性的浏览器会直接忽略它，不会有任何副作用。幸运的是，Github上有一个名为loading-attribute-polyfill的polyfill ，可以在这些情况下使用。
if ('loading' in HTMLImageElement.prototype) {
// Cool! The browser supports the loading attribute
} else {
// Houston... We need a polyfill!
}
有什么限制吗？
尽管让浏览器执行延迟加载工作非常酷，但您应该注意使用该属性时会出现一些限制：
- 与 JavaScript 变体不同，你无法影响资源加载的阈值。它是浏览器代码的一部分，目前无法更改。
- 该属性无法与 CSS 背景图像结合使用。或许不久的将来会支持，但现在肯定不支持。
- 如果打印网页对您来说是一个真正的用例，那么请注意加载属性存在一个未解决的错误。
如果你喜欢这篇文章，请给我一个❤️甚至🦄，也欢迎关注我dev.to。非常感谢！✌️
