页面加载完成时执行 javascript - Javascript

在前端开发中，我们经常需要在页面加载完成后执行一些 JavaScript 代码。比如我们可能需要在页面加载完成后初始化一些 UI 组件，或者从服务器端拉取一些数据等等。

在这篇文章中，我们将会介绍几种在页面加载完成后执行 JavaScript 代码的方法。

方法一: window.onload

window.onload 是最常用的在页面加载完成后执行 JavaScript 的方法。

window.onload = function() {
  // 在这里添加你需要执行的代码
};

该代码会在整个页面加载完成后执行，包括所有的 JavaScript、CSS、图片等等。

方法二: $(document).ready()

如果你使用了 jQuery，那么可以使用 $(document).ready() 来在页面加载完成后执行 JavaScript 代码。这个方法在 jQuery 中称作 DOM 就绪事件。

$(document).ready(function() {
  // 在这里添加你需要执行的代码
});

该代码只会在 DOM 加载完成后执行，不包括图片等资源的加载。

方法三: window.addEventListener('load', function() {})

window.addEventListener('load', function() {}) 是另一种在页面加载完成后执行 JavaScript 代码的方法。 与方法一类似，该代码会在整个页面加载完成后执行，包括所有的 JavaScript、CSS、图片等等。

window.addEventListener('load', function() {
  // 在这里添加你需要执行的代码
});

不过需要注意的是，在同一页面中，不能同时使用window.onload与window.addEventListener('load', function() {})。

总结

在页面加载完成后执行 JavaScript 代码是前端开发中非常常见的需求，上述三种方法都可以实现这个目的。

• window.onload
• $(document).ready()
• window.addEventListener('load', function() {})

如果你使用了 jQuery，那么可以使用 $(document).ready() 来代替 window.onload。不过，需要注意的是，在同一页面中，不能同时使用window.onload与window.addEventListener('load', function() {})。

希望这篇文章能够对你有所帮助！