发布于 2023-11-20 16:14:45 浏览 127 次
window.onload = function() {
// 在页面完全加载后执行的操作
};
1、window.onload 事件:
3、
使用 window.onload 事件可以确保整个页面及其所有资源都已经加载完成后再执行相应的操作。
4、
document.addEventListener('DOMContentLoaded', function() {
// 在 DOM 结构加载完成后执行的操作
});
2、DOMContentLoaded 事件:
5、
DOMContentLoaded 事件会在 DOM 结构加载完成后触发,此时页面的样式表、图片等外部资源可能还未加载完毕。
6、
3、jQuery 的 $(document).ready() 方法:
7、
$(document).ready(function() {
// 在 DOM 结构加载完成后执行的操作
});
如果你在项目中使用了 jQuery,你也可以使用它提供的 ready() 方法:
8、
这种方式与 DOMContentLoaded 事件类似,会在 DOM 结构加载完成后执行相应的操作。
9、
4、async/defer 属性:
10、
在引入外部 JavaScript 文件时,你可以使用 async 或 defer 属性来控制脚本的加载和执行时机。
11、
(1)使用 async 属性:
12、
<script src="example.js" async></script>
13、
脚本会异步加载,加载完成后会立即执行。
14、
(2)使用 defer 属性:
15、
<script src="example.js" defer></script>
16、
脚本会异步加载,但会等到整个文档解析完成后才执行。