如何让main.js在DOMContentLoaded后等待loading.js执行完毕再运行？

loading.js 代码修改 #

// loading.js
// 创建Promise，在DOM加载完成并执行遮罩隐藏逻辑后resolve
const loadingPromise = new Promise((resolve) => {
    document.addEventListener('DOMContentLoaded', () => {
        const loadingCover = document.querySelector('#loading-cover');
        loadingCover.style.display = 'none';
        // 标记loading逻辑完成
        resolve();
    });
});

// 将Promise暴露到全局，供main.js访问
window.loadingPromise = loadingPromise;

main.js 代码修改 #

有两种可行写法：

写法一：保持监听DOMContentLoaded，同时等待loading完成

// main.js
document.addEventListener('DOMContentLoaded', () => {
    // 等待loadingPromise完成后执行后续逻辑
    loadingPromise.then(() => {
        console.log("Do stuff");
        // 这里添加你的业务代码
    });
});

写法二：直接依赖loadingPromise（更简洁）

因为loadingPromise本身已经绑定了DOMContentLoaded事件，只有当DOM加载完成且loading逻辑执行完毕后才会resolve，所以可以省略额外的事件监听：

// main.js
loadingPromise.then(() => {
    console.log("Do stuff");
    // 这里添加你的业务代码
});

关键注意事项 #

• 脚本加载顺序：必须确保loading.js在main.js之前加载（HTML中script标签先引入loading.js，再引入main.js），否则main.js会找不到loadingPromise变量。
• Promise特性：如果main.js执行时，loading逻辑已经完成（Promise处于resolved状态），then回调会立即执行，不会出现等待延迟。

内容的提问来源于stack exchange，提问作者notsoscottishscot