JS加载后怎么调函数，使用DOMContentLoaded事件、window.onload事件、异步加载
在JavaScript中，有多种方法可以在页面加载后调用函数。使用DOMContentLoaded事件、window.onload事件、异步加载是一些常见的方法。接下来我们详细讨论其中的一种——使用DOMContentLoaded事件。
使用DOMContentLoaded事件
DOMContentLoaded事件在HTML文档被完全加载和解析时触发，而不必等待样式表、图像和子框架的完全加载。这使得它比window.onload更快，可以在页面内容加载完成后立即执行JavaScript代码。
document.addEventListener('DOMContentLoaded', function() {
// 你的函数代码
myFunction();
});
function myFunction() {
console.log("页面加载完毕，函数被调用");
}
使用DOMContentLoaded事件可以确保你的JavaScript代码在HTML文档完全加载和解析后立即执行，而不必等待其他资源的加载。这对于提升页面的响应速度和用户体验非常有帮助。
一、DOM READY 与 WINDOW.ONLOAD
1、DOMContentLoaded 事件
DOMContentLoaded事件是指当DOM完全加载和解析时触发的事件。此事件不必等待样式表、图像和子框架的加载完成，可以更早地执行JavaScript代码。
document.addEventListener('DOMContentLoaded', function() {
// 你的函数代码
myFunction();
});
function myFunction() {
console.log("页面加载完毕，函数被调用");
}
优点：
- 更早执行：不必等待所有资源加载完成。
- 提高用户体验：更快的响应速度。
缺点：
- 不能保证所有外部资源已经加载完成。
2、Window.onload 事件
window.onload事件在页面的所有资源（包括图像、样式表和子框架）加载完成后触发。它确保所有资源都加载完成后再执行JavaScript代码。
window.onload = function() {
// 你的函数代码
myFunction();
};
function myFunction() {
console.log("所有资源加载完毕，函数被调用");
}
优点：
- 确保所有资源加载完成。
缺点：
- 可能延迟JavaScript代码的执行，影响用户体验。
二、异步加载与懒加载
1、Async 和 Defer 属性
在HTML中，我们可以使用