JS 等待元素加载 - Javascript

在开发前端页面时，我们通常需要等待页面中某个元素加载完毕后再执行某些操作，如绑定事件、修改样式等。在 Javascript 中，我们可以使用多种方法等待元素加载完成。

1. 使用 window.onload 事件

window.onload 是在整个页面（包括图片、音频等资源）全部加载完成后触发的事件。可以将需要等待的元素（如 document.getElementById('myElement')）放在该事件中执行，确保元素已加载完成后再执行操作。

window.onload = function() {
  // do something after page loaded
  var myElement = document.getElementById('myElement');
  // other operations
}

2. 使用 DOMContentLoaded 事件

DOMContentLoaded 事件在 HTML 文档加载完成后触发，不必等待图片、音频等资源加载完成。因此比 window.onload 事件更快。

document.addEventListener('DOMContentLoaded', function() {
  // do something after DOMContentLoaded
  var myElement = document.getElementById('myElement');
  // other operations
});

3. 使用 setTimeout 函数

使用 setTimeout 函数可以让代码延迟执行一段时间后再执行。这个时间可以根据实际情况来设置。

setTimeout(function() {
  // wait for 2 seconds
  var myElement = document.getElementById('myElement');
  // other operations
}, 2000);

4. 使用 setInterval 函数

使用 setInterval 函数可以定时执行代码，直到满足某个条件后才停止执行。一般情况下不推荐使用，可能会造成性能问题。

var intervalId = setInterval(function() {
  // check if myElement is loaded
  var myElement = document.getElementById('myElement');
  if (myElement !== null) {
    clearInterval(intervalId);
    // other operations
  }
}, 1000);

以上是几种常用的等待元素加载的方法，选用适合自己的方法来实现需要的功能。

参考链接：

• window.onload
• DOMContentLoaded
• setTimeout
• setInterval