如何检测何时使用javascript动态注入了多个样式表

How to detect when multiple stylesheets have been dynamically injected with javascript

本文关键字：注入 动态 样式 javascript 何检测 检测 何时使      更新时间：2023-09-26

我有以下函数，当相应的HTML也被注入到页面中时，它会动态加载到样式表中。

这一切都很好。注入的html是隐藏的，一旦它的样式表被加载，它就被设置为可见。

function _addCssFile(filename, fragment) {
                var stylesheet = doc.createElement("link");
                stylesheet.setAttribute("rel", "stylesheet");
                stylesheet.setAttribute("type", "text/css");
                stylesheet.setAttribute("href", filename);
                doc.getElementsByTagName("head")[0].appendChild(stylesheet);
            stylesheet.onload = function(){
                fragment.setAttribute("style", "visibility:visible;");
            }          
}

然而，html的一部分可能有多个css文件要注入，所以我需要能够检测数组中的所有css文件何时成功注入DOM。

上面的函数为每个包含的css文件运行，一旦注入了整个样式表数组，我将如何启动事件？正如您所看到的，注入的html当前将被设置为对于第一个加载的样式表可见，并且对于随后的每个文件都可见。

有一个计数器。对于添加的每个CSS文件，递增计数器。对于每个加载的CSS文件，将其递减。如果在添加了所有CSS文件后计数器达到零，则它们都已加载。

相关文章：