页面加载完成后调用 javascript 函数 - Javascript

在Web开发中，有时候我们需要在页面加载完成后执行一些javascript代码。例如，我们需要加载图像或其他资源，或者我们需要初始化一些组件时。本文将介绍几种在页面加载完成后调用javascript函数的方法。

1. window.onload事件

window.onload事件是最基本的方式之一。它是当整个页面（包括图片、脚本、样式表等）都已经加载完毕时才会触发的。

window.onload = function() {
  // 在这里编写你的代码
}

在上面的代码中，我们为 window.onload 事件添加了一个匿名函数。当整个页面都加载完毕后，函数就会被调用。你可以在这个函数中编写对页面的初始化代码。

2. document.ready事件

document.ready 事件是jQuery库中的一个非常流行的特性。它相对于 window.onload 事件有一个明显的优点：它会在DOM树构建完成后就会被调用，而不用等待页面上所有的图像和资源都完全加载完成。这意味着你的代码会更快地被执行，并且你的用户不需要等待太长时间才能看到页面的内容。

$(document).ready(function() {
  // 在这里编写你的代码
});

3. DOMContentLoaded事件

DOMContentLoaded事件是当DOM树构建完成后就会被调用，而不用等待页面上所有的图像和资源都完全加载完成。这个事件在第二种方法中被jQuery库所使用。你也可以使用原始Javascript来注册这个事件：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里编写你的代码
});

需要注意的是这个事件并没有被所有的浏览器所支持。在IE8或更早的版本中，应该使用IE提供的一个类似事件：

document.attachEvent('onreadystatechange', function() {
  if(document.readyState === 'complete') {
    // 在这里编写你的代码
  }
});

4. 使用defer或async属性

使用 defer 或 async 属性可以使得我们可以在页面加载完成后调用Javascript代码。唯一的区别在于 defer 属性所调用的脚本会在DOM树构建完成之后按其出现的顺序依次被执行；而 async 属性所调用的脚本不会按照其出现的顺序执行，而是在它们下载完成后立即执行。

<script src="your_script.js" defer></script>

<script src="your_script.js" async></script>

总结

本文介绍了几种在页面加载完成后调用Javascript代码的方法。对于不同的需求，不同的方法都有其优缺点。程序员们应该选择最适合自己需求的方法。