页面所有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代码。
