跨浏览器CSS加载完成检测的JavaScript方法

本文档主要探讨如何在JavaScript中实现判断CSS文件加载完毕的方法，尤其是在不同浏览器环境下，由于兼容性问题，处理方式有所不同。首先，针对IE6到IE9以及Opera浏览器，利用`onload`事件可以较为直接地检测CSS文件加载完成。例如，使用`styleOnload`函数： ```javascript function styleOnload(node, callback) { if (node.attachEvent) { // IE6-9 node.attachEvent('onload', function() { callback(); // CSS加载完成调用回调函数 // 注意：onload在IE6-9中会在文件404时触发，但Opera会无响应，因此需要处理这种情况。 }); } else { // 非IE浏览器处理 } } ``` 然而，在其他现代浏览器如Firefox和WebKit（包括Safari）中，因为API的不同，需要采取更复杂的方法。Firefox可以通过`sheet.cssRules`属性是否存在来判断，但需要设置定时器进行轮询： ```javascript function poll(node, callback) { if (callback.isCalled) return; // 防止多次调用 let isLoaded = false; if (/webkit/i.test(navigator.userAgent)) { // WebKit if ('sheet' in node) { isLoaded = true; } } else if ('sheet' in node) { // Firefox try { if ('cssRules' in node.sheet) { isLoaded = true; } } catch (ex) { // 如果抛出NS_ERROR_DOM_SECURITY_ERR错误，则认为CSS已加载 if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { setTimeout(function() { callback(); // CSS加载完成时调用回调 }, 0); // 给渲染一些时间 } } ``` JavaScript判断CSS文件加载完毕的方法取决于所使用的浏览器及其支持的DOM API。开发者需要根据目标浏览器的特性，选择合适的策略来确保功能的兼容性和效率。