正文

学会用JavaScript检测所有脚本加载完成

/0 浏览量
0403

在网页开发中，确保所有脚本正确加载并执行是至关重要的。JavaScript 提供了多种方法来检测脚本是否已经加载完成。以下是一些常用的技术，以及如何使用它们来确保你的网页上的所有脚本都按预期加载。

1. 使用 DOMContentLoaded 事件

DOMContentLoaded 事件在初始HTML文档被完全加载和解析完成后触发，不需要等待样式表、图片和子框架的加载完成。这是一个检测HTML文档加载完成的好方法。

document.addEventListener('DOMContentLoaded', function() {
    console.log('所有DOM内容加载完成');
    // 在这里执行依赖于DOM的操作
});

2. 监听 load 事件

load 事件在页面完全加载完成后触发，包括所有的依赖资源（如图片、脚本等）。使用这个事件可以确保所有资源都加载完成。

window.addEventListener('load', function() {
    console.log('页面和所有依赖资源加载完成');
    // 在这里执行所有操作
});

3. 使用 onreadystatechange 事件

onreadystatechange 事件在文档的 readyState 属性改变时触发。readyState 属性可以用来检查文档的加载状态。

document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        console.log('页面加载完成');
        // 在这里执行所有操作
    }
};

4. 使用 MutationObserver 监听DOM变化

MutationObserver 是一个可以监听DOM树变化的API。你可以用它来检测特定的元素是否已经加载到DOM中。

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            console.log('所有脚本加载完成');
            // 在这里执行所有操作
        }
    });
});

const config = { childList: true, subtree: true };
observer.observe(document.body, config);

5. 使用 Promise 和 fetch

你可以使用 fetch API 来异步加载脚本，并结合 Promise 来处理加载完成后的逻辑。

function loadScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error('Script load error'));
        document.head.appendChild(script);
    });
}

loadScript('path/to/your/script.js').then(script => {
    console.log('脚本加载完成');
    // 在这里执行所有操作
});

总结

确保所有脚本加载完成是构建健壮网页的关键。通过使用上述方法之一，你可以有效地检测并处理脚本加载事件，从而在适当的时候执行依赖于脚本的操作。

-- 展开阅读全文 --