JavaScript 的初始化和加载顺序对于网页的性能和用户体验至关重要。以下是页面加载时可以初始化函数的几个阶段，以及相应的示例。
内联脚本
在 HTML 文件中直接编写 JavaScript 代码。内联脚本在浏览器解析到它们的位置时立即执行。
<!DOCTYPE html>
<html>
<head>
<title>内联脚本示例</title>
</head>
<body>
<script>
console.log("内联脚本在页面解析时立即执行");
</script>
</body>
</html>
外部脚本
通过<script>标签的src属性引用外部 JavaScript 文件。默认情况下，外部脚本在浏览器解析到它们的位置时执行。要让脚本在文档解析完成后执行，可以使用defer属性。
<!DOCTYPE html>
<html>
<head>
<title>外部脚本示例</title>
</head>
<body>
<script src="scripts.js"></script>
</body>
</html>
DOMContentLoaded 事件
当 HTML 文档被完全加载和解析完成后，DOMContentLoaded事件将被触发，不等待样式表、图像和子框架的完成加载。此时，可以在事件监听器中初始化函数。
document.addEventListener("DOMContentLoaded", function () {
console.log("DOMContentLoaded 事件触发时执行");
});
window.onload 事件
当页面上所有资源（包括图像、样式表和子框架等）都加载完成后，window.onload事件将被触发。此时，可以在事件监听器中初始化函数。
window.onload = function () {
console.log("window.onload 事件触发时执行");
};
jQuery 的 $(document).ready()
这是一个jQuery用法，它在DOMContentLoaded事件触发时执行。如果你使用 jQuery，可以在此处初始化函数。
$(document).ready(function () {
console.log("$(document).ready 在 DOMContentLoaded 事件触发时执行");
});
或者使用更简洁的语法：
$(function () {
console.log("简洁语法：在 DOMContentLoaded 事件触发时执行");
});
jQuery 的 $(window).on("load", function() {})
这是一个 jQuery 用法，它在 window.onload 事件触发时执行。如果你使用 jQuery，可以在此处初始化函数。
$(window).on("load", function () {
console.log("$(window).on('load') 在 window.onload 事件触发时执行");
});
以上就是页面加载时可以初始化函数的几个阶段。了解这些阶段有助于你编写更高效、更可靠的 JavaScript 代码。在实际开发中，根据具体需求和性能要求，你可能需要在不同的阶段执行不同的初始化操作。
暂无评论
要发表评论，您必须先 登录