页面所有ajax请求加载完成后执行的事件—页面加载完成后执行js的5种方式

页面所有ajax请求加载完成后执行的事件—页面加载完成后执行js的5种方式

在Web开发中，我们经常需要在页面加载完成后执行一些JavaScript代码。这些代码可能包括一些初始化操作、绑定事件、发送AJAX请求等。介绍5种常用的方式来实现页面加载完成后执行JavaScript代码。

1. 使用window.onload事件

window.onload是最常见的一种方式，它会在整个页面及其所有资源（包括图片、样式表等）都加载完成后触发。我们可以将需要执行的代码放在window.onload事件的回调函数中。

“`javascript

window.onload = function() {

// 在此处编写需要在页面加载完成后执行的代码

};

“`

2. 使用document.ready事件

document.ready是jQuery框架提供的一个事件，它会在DOM树构建完成后触发，而不需要等待所有资源加载完成。这使得页面加载速度更快，并且可以在DOM准备好后立即执行JavaScript代码。

“`javascript

$(document).ready(function() {

// 在此处编写需要在DOM准备好后执行的代码

});

“`

3. 使用DOMContentLoaded事件

DOMContentLoaded事件是原生JavaScript提供的一种方式，它会在DOM树构建完成后触发，类似于document.ready事件。但与document.ready事件不同的是，DOMContentLoaded事件不依赖于任何框架。

“`javascript

document.addEventListener(“DOMContentLoaded”, function() {

// 在此处编写需要在DOM准备好后执行的代码

});

“`

4. 使用defer属性

在script标签中添加defer属性可以延迟脚本的执行，直到整个页面都加载完成后再执行。这种方式适用于需要在页面加载完成后执行的脚本，而不需要等待其他资源加载完成。

“`html

“`

// 在script.js文件中编写需要在页面加载完成后执行的代码

5. 使用async属性

与defer属性类似，async属性也可以延迟脚本的执行，直到整个页面都加载完成后再执行。但与defer属性不同的是，async属性会在脚本下载完成后立即执行，而不会按照脚本在页面中的顺序执行。

“`html

“`

// 在script.js文件中编写需要在页面加载完成后执行的代码

以上是5种常用的方式来实现页面加载完成后执行JavaScript代码。根据具体需求选择合适的方式，可以提高页面加载速度和用户体验。无论是使用window.onload事件、document.ready事件、DOMContentLoaded事件，还是添加defer属性或async属性，都能有效地在页面加载完成后执行JavaScript代码。