在前端开发中，经常需要判断元素是否可见，并对其进行相应的操作。例如，在滚动页面时，想要实现“懒加载”图片的效果，就需要判断图片是否出现在了可见区域内。此时，就可以使用元素可见性相关的事件侦听器来解决问题。
元素可见性相关的事件
DOM 中有两个与元素可见性相关的事件，分别是 IntersectionObserver 和 ResizeObserver。
IntersectionObserver
IntersectionObserver 用于监听目标元素与祖先元素或视口的交集变化。当目标元素进入或离开祖先元素或视口时，会触发回调函数。该回调函数可以接收一个 IntersectionObserverEntry 对象作为参数，包含了目标元素与祖先元素或视口的交集信息。
例如，下面的代码演示了如何使用 IntersectionObserver 判断元素是否进入了视口：
----- ------ - ----------------------------------
----- ------- - -
----- -----
----------- ------
---------- ---
--
----- -------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ------------------------ - -- -
-------------------- -- -----------
- ---- -
-------------------- -- --- -----------
-
---
-- ---------
-------------------------在上面的代码中，我们首先选取了一个目标元素 target，然后创建了一个 IntersectionObserver 对象 observer。在回调函数中，通过判断 IntersectionObserverEntry 对象的 intersectionRatio 属性是否大于 0，来确定元素是否进入了视口。
ResizeObserver
ResizeObserver 用于监听元素的尺寸变化。当目标元素的尺寸发生变化时，会触发回调函数。该回调函数可以接收一个数组作为参数，包含了所有被观察的元素的尺寸信息。
例如，下面的代码演示了如何使用 ResizeObserver 监听元素的宽度变化：
----- ------ - ----------------------------------
----- -------- - --- ---------------------- -- -
--------------------- -- -
-------------------- ------ -------------------------------
---
---
-------------------------在上面的代码中，我们首先选取了一个目标元素 target，然后创建了一个 ResizeObserver 对象 observer。在回调函数中，通过遍历传入的 entries 数组，获取每个被观察元素的尺寸信息，并输出其宽度值。
示例代码：实现图片懒加载
下面的示例代码演示了如何使用 IntersectionObserver 实现图片懒加载功能：
--------- -----
------
------
----- ----------------
----------- ---- --------------
-------
------------------ -
------ -----
------- ------
----------------- --------
-------- -----
---------------- -------
------------ -------
-
------------------ --- -
---------- -----
----------- -----
-
--------
-------
------
---- ------------------
---- --------------------------
---- ------ ----------------------------------------------- -------
------
---- --------------------------
---- ------ ----------------------------------------------- -------
------
---- --------------------------
---- ------ ----------------------------------------------- -------
------
------
--------
----- -------------- - -- -- -
----- ------ - -------------------------------------------
----- ------- - -
----- -----
----
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------