等待元素加载 Javascript

在Web开发中，有时需要等待页面元素加载完成后才能执行JavaScript操作。通常情况下，我们可以使用setTimeout或setInterval定时器函数来等待一段时间。但这种做法具有不稳定性和可靠性差的问题，因为元素加载时间可能因浏览器或网络延迟而变化。

幸运的是，现代的Web浏览器提供了一种更可靠的方法：使用MutationObserver对象检测DOM树中的变化以及IntersectionObserver对象监听元素位置与视窗的交叉。

MutationObserver

MutationObserver是一个DOM观察者对象，它可以监视DOM树结构中的变化，如节点添加或删除等。可以借助MutationObserver来监听元素何时已加载到DOM，然后执行后续操作。

// 需要等待的元素选择器
const selector = '#target';

// 创建MutationObserver对象实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      const target = document.querySelector(selector);

      if (target !== null) {
        // 元素已被加载，执行后续操作
        console.log('The element has been loaded!');
        observer.disconnect();
      }
    }
  });
});

// 选择需要监视的DOM节点
const targetNode = document.body;

// 启动MutationObserver
observer.observe(targetNode, {
  childList: true,
  subtree: true,
});

上面的代码创建了一个MutationObserver实例，它会监听body节点下所有子节点的变化，当元素加载到DOM中时，会执行console.log操作。

IntersectionObserver

IntersectionObserver是另一个观察者对象，它可以监听元素是否与视口相交的变化，并在满足特定条件时触发回调函数。这使得我们可以轻松地等待元素加载完毕，而不必依赖setTimeout或setInterval函数的不准确性。

// 需要等待的元素选择器
const selector = '#target';

// 创建IntersectionObserver对象实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 元素已被加载，执行后续操作
      console.log('The element has been loaded!');
      observer.unobserve(entry.target);
    }
  });
});

// 获取需要监视的DOM节点
const target = document.querySelector(selector);

if (target !== null) {
  // 启动IntersectionObserver
  observer.observe(target);
}

上面的代码创建了一个IntersectionObserver实例，并使用querySelector方法选择要监视的元素。当元素加载到视图中时，会执行console.log操作。

总结

使用MutationObserver和IntersectionObserver对象可以方便地等待页面元素加载完成后执行JavaScript操作。这些对象使得代码更加优雅、轻便和可维护，避免了使用setTimeout或setInterval函数的不稳定性和可靠性差的问题。