确保延时加载的a.js脚本在主页面加载完成后执行的方法
在前端开发中，延迟加载脚本是优化页面性能的常见手段，但有时需要保证延迟加载的脚本在主页面所有资源加载完成后才执行，避免因依赖未就绪导致脚本报错。下面介绍几种可靠的实现方案。
方案一：监听 window 的 load 事件
window.onload 事件会在主页面所有资源（包括图片、样式表、子框架等）完全加载完成后触发，我们可以在该事件的回调中动态加载 a.js 脚本，确保执行时机符合预期。
// 监听页面加载完成事件
window.addEventListener('load', function() {
// 创建script标签用于加载a.js
var script = document.createElement('script');
script.src = 'a.js';
// 可选：设置脚本加载完成后的回调
script.onload = function() {
console.log('a.js加载并执行完成');
};
// 将script标签添加到文档中，开始加载脚本
document.body.appendChild(script);
});这种方法的核心是依赖全局的 load 事件，适合需要等待主页面全部资源就绪的场景，但需要注意如果主页面有较多大型资源，load 事件触发时间可能较晚。
方案二：结合 DOMContentLoaded 与资源加载检测
如果只需要等待 DOM 结构构建完成，不需要等待图片等外部资源，可以先监听 DOMContentLoaded 事件，再在事件回调中触发脚本加载；如果仍有部分依赖资源需要等待，可以额外检测资源加载状态。
// 等待DOM结构加载完成
document.addEventListener('DOMContentLoaded', function() {
// 假设主页面有一个依赖的图片，需要等待它加载完成
var dependentImg = document.getElementById('dependent-img');
if (dependentImg && !dependentImg.complete) {
// 图片未加载完成时，等待其加载完成再加载a.js
dependentImg.addEventListener('load', loadScript);
dependentImg.addEventListener('error', loadScript); // 即使加载失败也继续加载脚本
} else {
// 图片已加载或不存在依赖图片，直接加载脚本
loadScript();
}
});
function loadScript() {
var script = document.createElement('script');
script.src = 'a.js';
script.onload = function() {
console.log('a.js执行完成');
};
document.head.appendChild(script);
}这种方案灵活性更高，可以根据实际依赖的资源调整等待逻辑，适配不同的业务场景。
方案三：使用 async/defer 配合事件监听
如果是通过动态创建 script 标签加载脚本，也可以结合 async 或 defer 属性，但动态创建的 script 标签默认是异步加载的，因此需要手动控制执行时机。如果要确保脚本在主页面加载完成后执行，还是需要在 load 事件触发后再插入脚本。
// 动态加载脚本并控制执行时机
function loadScriptAfterPageLoad() {
if (document.readyState === 'complete') {
// 页面已经完全加载，直接执行加载逻辑
loadAJS();
} else {
// 页面未加载完成，监听load事件
window.addEventListener('load', loadAJS);
}
}
function loadAJS() {
var script = document.createElement('script');
// 动态创建的脚本默认async为true，如需保证执行顺序可设置为false
script.async = false;
script.src = 'a.js';
document.body.appendChild(script);
}
// 调用函数
loadScriptAfterPageLoad();这里通过检测 document.readyState 状态，可以避免重复绑定事件，同时适配页面已经加载完成后再调用函数的情况。
注意事项
如果 a.js 脚本本身有依赖其他全局变量或 DOM 元素，除了等待页面加载完成，还需要确保这些依赖在脚本执行前已经初始化完毕。
动态加载脚本时，建议将 script 标签添加到
<head>或<body>末尾，避免影响现有 DOM 结构。如果主页面使用了单页应用框架，需要结合框架的生命周期钩子（如 Vue 的 mounted、React 的 useEffect）来判断页面就绪状态，再触发脚本加载。
以上几种方案都可以实现延时加载的 a.js 脚本在主页面加载完成后执行，可以根据实际业务场景选择最合适的实现方式。