前端开发中，图片是页面重要的视觉元素之一，然而过多的图片会导致页面性能下降，降低用户体验。这时候，我们就需要一种方法来减少页面资源的加载，那就是图片懒加载技术。
图片懒加载是指在滚动页面时，只加载当前可视区域中的图片，而不加载所有图片。这种技术可以大幅提升页面性能，缩短加载时间。
实现原理
在 SPA 应用中，页面是由 JavaScript 渲染出来的，而图片的加载是由浏览器自动完成的。因此，我们需要通过 JavaScript 来控制图片的加载。
具体实现流程如下：
- 通过 JavaScript 获取当前页面可见区域的位置。
- 遍历页面中的所有图片，判断图片是否进入了可见区域。
- 如果图片进入可见区域，则将图片的
data-src属性赋值给src属性，实现图片的加载。
实现方式
下面介绍两种常用的方式实现图片懒加载。
1. Intersection Observer
Intersection Observer 是一个 API，可以用来监听一个元素是否进入了可见区域。使用 Intersection Observer 实现图片懒加载的过程如下：
- 使用
document.querySelectorAll方法获取所有需要懒加载的图片。 - 创建一个 Intersection Observer 实例，并设置回调函数。
- 在回调函数中获取目标元素（即需要懒加载的图片），并将图片的
data-src属性赋值给src属性。
示例代码如下：
----- ------ - -------------------------------------------
----- -- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
------- - ----------------
------------------
-
---
---
-------------------- -- -------------------2. 自定义指令
对于 Vue.js 或者其他 MVVM 框架来说，我们可以使用自定义指令来实现图片懒加载。自定义指令可以让我们非常方便地操作 DOM 元素。
具体实现过程如下：
- 注册一个全局的
v-lazy指令。 - 监听
Intersection Observer回调函数，并根据元素是否进入可见区域来添加或移除lazyload类。 - 在
lazyload类的样式中设置图片的data-src属性。
示例代码如下：
----------
---- ----------------- -------
-----------
--------
------ ------- -
------ -
------ -
--------- --------------------------------------
--
--
----------- -
----- -
------------ -------- -
----- -- - --- ---------------------------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
------- - --------------
---------------------------------
------------------
-
---
---
---------------
-----------------------------
-
-
-
--
---------总结
图片懒加载技术可以提升页面性能，优化用户体验。通过 Intersection Observer 或者自定义指令，我们可以在 SPA 应用中轻松地实现图片懒加载。在实际项目中，合理使用图片懒加载技术将为我们带来更好的用户体验和更快的页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66430270d3423812e40f4339