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