什么是图片懒加载
图片懒加载是一种优化网页性能的技术，它可以在用户滚动到页面上的图片时再加载图片。这种技术可以减少页面的加载时间和带宽消耗，提高用户体验。在 SPA 单页应用中，图片懒加载也是一种常见的优化手段。
实现图片懒加载的方法
IntersectionObserver API
IntersectionObserver API 是一种现代浏览器提供的 API，它可以监听元素进入或离开视口，并触发相应的回调函数。利用 IntersectionObserver API 可以实现图片懒加载的效果，具体步骤如下：
- 创建一个 IntersectionObserver 实例，指定一个回调函数。
- 找到需要懒加载的图片元素，将它们的 src 属性设置为占位符，如 data-src。
- 将需要懒加载的图片元素传给 IntersectionObserver 实例的 observe 方法。
- 在回调函数中判断当前元素是否进入视口，如果是，则将 data-src 的值赋给 src 属性，触发图片加载。
示例代码如下：
-- -------------------- ---- -------
----- -------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - ------------
------- - ---------------
-----------------------
-
--
--
----- ---- - ------------------------------------------
---------------- -- ----------------------自定义指令
如果你使用 Vue.js 或 React 等前端框架，可以通过自定义指令的方式实现图片懒加载。具体步骤如下：
- 创建一个自定义指令，指定一个回调函数。
- 在 bind 阶段将图片元素的 src 属性设置为占位符，如 loading.gif。
- 在 inserted 阶段判断当前元素是否进入视口，如果是，则将 data-src 的值赋给 src 属性，触发图片加载。
Vue.js 自定义指令示例代码如下：
-- -------------------- ---- -------
------------------------- -
--------- -- -- -
----- --- - --
----- -------- - --- ------------------------------ -- -
-- ---------------------- -
------- - ---------------
---------------------
-
--
---------------------
--
----- -- -- -
------ - -------------
--
--React 自定义指令示例代码如下：
-- -------------------- ---- -------
------ ------ - ------- --------- - ---- -------
----- ------------- - ----- -- -
----- ------ - --------
------------ -- -
----- -------- - --- ------------------------------ -- -
-- ---------------------- -
------------------ - --------------------------
---------------------
-
--
--------------------------------
-- ---
------ -
----
------------
-----------------
--------------------
---------------
--
-
-总结
SPA 单页应用中实现图片懒加载可以提高页面性能和用户体验，可以利用 IntersectionObserver API 或自定义指令等方式实现。在实现过程中需要注意一些细节问题，如图片宽高的设置、占位符的选择等。希望本文的内容对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e433411886fbafa4055164