JS加载完成后执行

JS加载完成后执行

在web开发中，经常会遇到需要在页面加载完成后执行特定的JavaScript代码的情况。这种需求可能是为了确保页面中的所有元素都已经加载完毕，或者是为了在页面完全渲染后再执行某些操作。为了实现在页面加载完成后执行JS代码，我们可以使用多种方法，本文将详细介绍这些方法。

方法一：使用window.onload事件

最常见的方法是使用window.onload事件，该事件会在整个页面以及页面中的所有资源（如图片）都加载完成后触发。我们可以通过给window对象添加一个名为onload的事件处理函数来实现在页面加载完成后执行JS代码。

示例代码如下：

window.onload = function() {
    // 在页面加载完成后执行的代码
    console.log('页面已完全加载');
};

运行结果：

页面已完全加载

方法二：使用DOMContentLoaded事件

除了window.onload事件外，还可以使用DOMContentLoaded事件。DOMContentLoaded事件在DOM加载完成后触发，此时页面所有的DOM元素都已经构建完成，但是图片等外部资源可能还在加载中。相比window.onload事件，DOMContentLoaded事件的优势在于会更快地触发，因为它不需要等待图片等外部资源加载完毕。

示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
    // 在DOM加载完成后执行的代码
    console.log('DOM已加载完成');
});

运行结果：

DOM已加载完成

方法三：使用defer属性

另一种常见的方法是在引入JS文件时使用defer属性。defer属性可以确保脚本在文档解析完成后才会执行，也就是在DOMContentLoaded事件触发前执行。

示例代码如下：

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

在上面的示例中，script.js中的代码将在DOMContentLoaded事件触发前执行。

方法四：使用async属性

除了defer属性，还可以使用async属性来实现在页面加载完成后执行JS代码。async属性会异步加载脚本，并且在脚本加载完成后立即执行，不会阻塞页面的解析。

示例代码如下：

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

方法五：使用setTimeout函数延迟执行

如果以上方法都不符合需求，还可以使用setTimeout函数来延迟执行JS代码。通过设置一个较短的延迟时间，可以确保在页面加载完成后再执行代码。

示例代码如下：

setTimeout(function() {
    // 延迟执行的代码
    console.log('页面已加载完成');
}, 100);

运行结果：

页面已加载完成

总结

本文介绍了在页面加载完成后执行JS代码的几种常见方法，包括使用window.onload事件、DOMContentLoaded事件、defer属性、async属性和setTimeout函数。通过选择合适的方法，可以确保JS代码在页面加载完成后才执行，从而提升用户体验和页面性能。在实际开发中，根据具体需求选择最合适的方法来执行JS代码是非常重要的。