随着网页内容的不断增加，图片占据了越来越大的比例。但是，当页面上大量的图片同时加载时，会导致页面加载速度变慢，影响用户体验。为了解决这个问题，我们可以使用 Lazy Load 技术，即图片延迟加载。
什么是 Lazy Load？
Lazy Load 是一种网页优化技术，它可以让网页只在需要的时候加载图片。当用户滚动页面时，Lazy Load 会自动加载图片，而不是一次性加载所有的图片。这样可以减少页面的加载时间，提高用户体验。
如何实现 Lazy Load？
在实现 Lazy Load 时，最常用的方法是使用 JavaScript。下面是一个简单的示例代码：
<img src="placeholder.jpg" data-src="image.jpg" class="lazyload">
在这个示例中，我们给图片添加了一个 data-src 属性，用来存储图片的真实地址。同时，我们还给图片添加了一个 lazyload 类，用来标识这是一个需要延迟加载的图片。
接下来，我们需要使用 JavaScript 来实现 Lazy Load 的功能。下面是一个基本的实现：
-- -------------------- ---- -------
--------------------------------- ---------- -
--- ---------- - ---------------------------------------
--- ---- - - -- - - ------------------ ---- -
-- ------------------------ - ------------------- - -------------------- -
----------------- - --------------------------
-------------------------------------------
-
-
---在这个实现中，我们使用了 window.addEventListener 来监听页面滚动事件。当页面滚动时，我们遍历所有的 lazyload 图片，判断它们是否已经进入了视窗内。如果是，就将 data-src 属性的值赋给 src 属性，这样就可以加载图片了。
如何进一步优化 Lazy Load？
虽然上面的示例代码可以实现基本的 Lazy Load 功能，但是我们还可以进一步优化它。
使用 IntersectionObserver API
在现代浏览器中，我们可以使用 IntersectionObserver API 来实现 Lazy Load。这个 API 可以监听元素与视口的交叉状态，从而实现图片的延迟加载。下面是一个使用 IntersectionObserver API 的示例代码：
-- -------------------- ---- -------
--- ---------- - ---------------------------------------
--- -------- - --- -------------------------------------- --------- -
------------------------------- -
-- ---------------------- -
---------------- - -------------------------
------------------------------------------
---------------------------------
-
---
---
---------------------------------- -
------------------------
---在这个示例中，我们使用 IntersectionObserver 构造函数创建了一个观察器对象，用来监听 lazyload 图片与视口的交叉状态。当图片进入视口时，观察器会自动触发回调函数，从而实现图片的延迟加载。
使用 WebP 格式图片
除了使用 Lazy Load 技术，我们还可以使用 WebP 格式图片来优化网页加载速度。WebP 是一种由 Google 开发的图片格式，它可以实现更高的压缩率和更快的加载速度。
要使用 WebP 格式图片，我们需要将图片转换为 WebP 格式，并在网页中使用 <picture> 标签来加载图片。下面是一个使用 WebP 格式图片的示例代码：
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
在这个示例中，我们使用 <source> 标签来加载 WebP 格式图片，如果浏览器不支持 WebP 格式，则会自动加载 <img> 标签中的 JPEG 图片。
总结
Lazy Load 技术可以帮助我们优化网页加载速度，提高用户体验。在实现 Lazy Load 时，我们可以使用 JavaScript 或者 IntersectionObserver API。除此之外，我们还可以使用 WebP 格式图片来进一步优化网页加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66034935d10417a222f8e61c