响应式设计是现代 Web 设计中的重要概念之一。它的主要目的是让网页在不同设备、不同浏览器和不同屏幕宽度下都能够自动适应，提供更好的用户体验。其中一个常常被忽视的方面是图片的加载和优化，尤其是在移动设备上，图片资源的加载对页面性能和响应速度的影响尤为明显。而 lazyload（延迟加载）则是解决这个问题的有效方法之一。
本文将介绍如何使用 lazyload 实现响应式设计中图片的优化和加载，并提供示例代码以供参考。
什么是 lazyload？
lazyload 是一种技术，它能够延迟网页中图片的加载，直到用户真正需要或者视口需要它们时再加载。它可以大大减少页面的加载时间和带宽占用，提高用户体验，减轻服务器的负担。
如何实现图片 lazyload？
有很多种方式可以实现图片的 lazyload，下面我们介绍其中两种较为常用的方式。
1. 使用 IntersectionObserver 接口
IntersectionObserver 是一个新的异步 API，它可以检测元素与它们的父元素或根元素交叉的情况。这意味着我们可以通过判断图片是否进入视口的方式来触发图片的加载。
<!-- HTML 代码 --> <img class="lazy" data-src="image.jpg" alt="image">
-- -------------------- ---- -------
-- ---------- --
----- ---------- - -----------------------------------
----- ------- - -
----------- ------
---------- ---
-
----- -------- - ------ -- -
----- -- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
----- --- - -----------------------------
----------------------- -----
-----------------------------
------------------------
-
---
-- ---------
-------------------
-
-----------------------------上面的代码中，我们首先定义了一组延迟加载的图片，它们的 class 属性设置为 "lazy"，并且它们的真实图片地址是存在 data-src 属性里面的。我们创建了一个 IntersectionObserver 对象，然后对每个目标元素（即需要延迟加载的图片）进行监听。如果目标元素进入了视口，我们就可以通过获取它的 data-src 属性并将它们设置为图片的 src 属性，从而完成图片的加载。
2. 使用 scroll 事件
scroll 事件是另一种实现图片 lazyload 的方式，但是与 IntersectionObserver 相比，它的性能通常会更低，因为在滚动时可能会触发过多的事件。
<!-- HTML 代码 --> <img class="lazy" data-src="image.jpg" alt="image">
-- -------------------- ---- -------
-- ---------- --
----- ---------- - -----------------------------------
--- ------------------------
----- -------- - -- -- -
-- ------------------------- -
---------------------------------------------
-
----------------------- - -------------------- -- -
----- --------- - -------------------
---------------------- -- -
-- -------------- - ------------------ - ---------- -
----------------------- ------------------------------
-----------------------------
-
---
-- ------------------ --- -- -
-------------------------------------- ---------
-
-- ----
-
----------------------------------- ----------上面的代码中，我们首先定义了一组延迟加载的图片，并且它们的真实图片地址是存在 data-src 属性里面的。然后我们用一个 scroll 事件来检测用户的滚动行为，并判断图片是否应该被加载。具体来说，当图片的顶部距离小于页面可视区域的高度加上滚动距离时，我们就可以将图片的 data-src 属性值（即真实图片地址）设置为图片的 src 属性值，从而完成图片的加载。
结论
在响应式设计中使用图片 lazyload 可以提高网页的加载速度，提高用户体验，并减少服务器的负担。本文介绍了两种实现图片 lazyload 的方式，并提供了对应的示例代码，希望对你的工作和学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ca70b5f551281025b4b08