js实现页面加载
监听 DOMContentLoaded 事件
使用 DOMContentLoaded 事件可以在 HTML 文档完全加载和解析后触发，无需等待样式表、图像等外部资源加载完成。
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM 已加载，可以操作元素');
});监听 load 事件
load 事件会在整个页面（包括所有依赖资源如样式表和图片）加载完成后触发。
window.addEventListener('load', function() {
console.log('页面完全加载完成');
});使用 jQuery 的 ready 方法
如果项目中使用了 jQuery，可以通过 $(document).ready() 实现类似效果。
$(document).ready(function() {
console.log('jQuery DOM 就绪');
});动态脚本加载后执行
通过动态创建 <script> 标签加载脚本，并在 onload 回调中执行逻辑。
const script = document.createElement('script');
script.src = 'path/to/script.js';
script.onload = function() {
console.log('脚本加载完成');
};
document.head.appendChild(script);异步加载资源时使用 Promise
结合 Promise 和 async/await 控制多个资源的加载顺序。
function loadResource(url) {
return new Promise((resolve, reject) => {
const resource = document.createElement('script');
resource.src = url;
resource.onload = resolve;
resource.onerror = reject;
document.head.appendChild(resource);
});
}
async function init() {
await loadResource('lib1.js');
await loadResource('lib2.js');
console.log('所有资源加载完成');
}
init();使用 defer 或 async 属性
在 <script> 标签中添加 defer 或 async 属性控制脚本加载行为：
defer：脚本异步加载，但会在 DOM 解析完成后按顺序执行。async：脚本异步加载并立即执行，不保证顺序。<script src="script.js" defer></script> <script src="script.js" async></script>
