等待元素加载 - JavaScript

在前端开发中，我们经常需要等待某个元素加载完毕后再开始执行一些操作，例如获取元素位置、修改元素样式等等。本文将介绍几种在 JavaScript 中等待元素加载的方法。

监听 DOMContentLoaded 事件

在 JavaScript 中，我们可以通过监听 DOMContentLoaded 事件来等待 DOM 加载完成。该事件在页面的 HTML 和 JavaScript 文件都被解析完后触发，我们可以在事件回调函数中编写需要执行的代码。

document.addEventListener('DOMContentLoaded', function() {
  // 这里编写需要执行的代码
});

使用 setTimeout 方法

我们可以使用 setTimeout 方法来延迟执行代码，以达到等待元素加载的效果。例如，在等待某个元素加载完毕后修改其样式：

// 等待 id 为 'myElement' 的元素加载完毕后，修改其背景色
var checkInterval = setInterval(function() {
  var element = document.getElementById('myElement');
  if (element) {
    element.style.backgroundColor = 'red';
    clearInterval(checkInterval);
  }
}, 100);

在上面的例子中，我们通过定时器每隔 100 毫秒检查一遍 myElement 元素是否加载完成，如果加载完成则修改其背景色，并清除定时器。

使用 MutationObserver 方法

MutationObserver 方法能够在目标元素发生任何 DOM 变化时被触发。我们可以利用这个方法来等待元素的加载完成。

// 监听 id 为 'myElement' 的元素是否加载完成
var targetNode = document.getElementById('myElement');
var observerOptions = {
  childList: true,
  subtree: true
};

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes && mutation.addedNodes.length > 0) {
      // 'myElement' 元素已加载完成
      observer.disconnect();
      // 在此处编写需要执行的代码
    }
  });    
});

observer.observe(targetNode, observerOptions);

在上面的例子中，我们对 id 为 myElement 的元素进行了监测，等待其加载完成后执行回调函数。在回调函数中我们可以编写需要执行的代码，例如获取元素位置等。

以上就是三种 JavaScript 中等待元素加载的方法，根据不同的场景选择不同的方法能够更好地实现等待元素加载的功能。