怎么监听js css加载完成

监听JS和CSS加载完成的几种方法：使用onload事件、利用Promise和async/await、结合MutationObserver实现细粒度控制、使用第三方库如jQuery、使用IntersectionObserver优化性能。

在开发过程中，监听JS和CSS文件的加载完成是一个常见的需求。通过这种方式，开发者可以确保在所有资源加载完毕后再执行某些操作，从而提高页面的稳定性和用户体验。

一、使用onload事件

对于外部JS和CSS文件，最简单的方法是使用onload事件。这种方法非常直观和易于实现，适用于大多数场景。

监听JS加载完成

要监听一个外部JS文件的加载完成，可以通过以下代码实现：

let script = document.createElement('script');

script.src = 'your-script.js';
script.onload = function() {
    console.log('JS file loaded!');
    // 执行后续操作
};
document.head.appendChild(script);

监听CSS加载完成

类似地，对于CSS文件，可以使用以下代码：

let link = document.createElement('link');

link.rel = 'stylesheet';
link.href = 'your-style.css';
link.onload = function() {
    console.log('CSS file loaded!');
    // 执行后续操作
};
document.head.appendChild(link);

通过这种方式，可以确保在JS和CSS文件加载完成后再执行特定的操作。

二、利用Promise和async/await

在现代JavaScript中，Promise和async/await提供了一种更为优雅的方式来处理异步操作。通过将资源加载操作封装在Promise中，可以使代码更加简洁和易于维护。

监听JS加载完成

以下是使用Promise封装外部JS文件加载的示例：

function loadScript(src) {

    return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        script.src = src;
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error for ${src}`));
        document.head.appendChild(script);
    });
}
(async () => {
    try {
        await loadScript('your-script.js');
        console.log('JS file loaded!');
        // 执行后续操作
    } catch (error) {
        console.error(error);
    }
})();

监听CSS加载完成

类似地，可以封装CSS文件加载：

function loadCSS(href) {

    return new Promise((resolve, reject) => {
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = href;
        link.onload = () => resolve(link);
        link.onerror = () => reject(new Error(`CSS load error for ${href}`));
        document.head.appendChild(link);
    });
}
(async () => {
    try {
        await loadCSS('your-style.css');
        console.log('CSS file loaded!');
        // 执行后续操作
    } catch (error) {
        console.error(error);
    }
})();

三、结合MutationObserver实现细粒度控制

在某些情况下，可能需要对DOM元素的变化进行细粒度的控制。MutationObserver是一种高效的观察DOM变化的工具，可以结合onload事件，实现更为复杂的监听需求。

以下是一个示例，展示如何使用MutationObserver监听CSS文件的加载：

const observer = new MutationObserver((mutations) => {

    mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach((node) => {
                if (node.tagName === 'LINK' && node.rel === 'stylesheet') {
                    node.onload = () => {
                        console.log('CSS file loaded via MutationObserver!');
                        // 执行后续操作
                    };
                }
            });
        }
    });
});
observer.observe(document.head, { childList: true });

四、使用第三方库如jQuery

对于习惯使用第三方库的开发者，可以利用jQuery来简化监听外部资源加载的操作。

监听JS加载完成

$.getScript('your-script.js')

    .done(function(script, textStatus) {
        console.log('JS file loaded!');
        // 执行后续操作
    })
    .fail(function(jqxhr, settings, exception) {
        console.error('Failed to load JS file:', exception);
    });

监听CSS加载完成

$('<link/>', {

    rel: 'stylesheet',
    href: 'your-style.css',
    onload: function() {
        console.log('CSS file loaded!');
        // 执行后续操作
    }
}).appendTo('head');

五、使用IntersectionObserver优化性能

对于需要监听页面上某些元素是否已经加载并显示的场景，可以使用IntersectionObserver。这种方法不仅可以监听资源的加载，还能优化页面的性能。

let observer = new IntersectionObserver((entries, observer) => {

    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Element is visible!');
            // 执行后续操作
            observer.unobserve(entry.target);
        }
    });
}, { root: null, threshold: 0.1 });
document.querySelectorAll('img').forEach(img => {
    observer.observe(img);
});

结论

监听JS和CSS加载完成的方法有很多，具体选择哪种方法取决于项目的需求和复杂度。对于简单场景，可以直接使用onload事件，对于复杂的异步操作，建议使用Promise和async/await，而对于需要细粒度控制的场景，可以结合MutationObserver。此外，使用第三方库如jQuery也能简化操作，而IntersectionObserver则适用于需要优化性能的场景。在实际项目中，开发者可以根据具体需求选择合适的方法，以确保页面资源加载的稳定性和效率。

相关问答FAQs：

1. 如何判断JavaScript和CSS文件是否加载完成？
JavaScript和CSS文件的加载完成可以通过使用事件监听来判断。在JavaScript中，可以通过监听DOMContentLoaded事件来判断DOM是否加载完成，而CSS文件的加载完成可以通过监听load事件来判断。

2. 为什么要监听JavaScript和CSS文件的加载完成？
监听JavaScript和CSS文件的加载完成可以确保在文件加载完成后再执行相关操作，避免出现因文件未加载完成而导致的错误。

3. 如何在JavaScript中监听JavaScript和CSS文件的加载完成？
在JavaScript中，可以使用addEventListener方法来监听DOMContentLoaded和load事件。例如：

document.addEventListener('DOMContentLoaded', function() {
  // 在DOM加载完成后执行相关操作
});

window.addEventListener('load', function() {
  // 在页面及所有资源加载完成后执行相关操作
});

这样可以确保在文件加载完成后再执行相关操作，避免出现因文件未加载完成而导致的错误。