javascript - 如何检测何时使用 JavaScript 动态注入(inject)多个样式表

标签 javascript

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

这一切都很好。注入(inject)的 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 可能有多个要注入(inject)的 css 文件,因此我需要能够检测数组中的所有 css 文件何时已成功注入(inject) DOM。

上面的函数针对每个包含的 css 文件运行,一旦注入(inject)整个样式表数组,我将如何触发事件?正如您所看到的,注入(inject)的 html 当前将设置为对于第一个加载的样式表可见,并且对于每个后续文件再次设置为可见。

最佳答案

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

关于javascript - 如何检测何时使用 JavaScript 动态注入(inject)多个样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11393794/

相关文章:

javascript - 在 ajax 响应中返回 false 不起作用,并且表单不会取消提交

javascript - Ajax 完成回调不等待不是函数

php - 根据选择值显示/隐藏字段

javascript - 如何针对特定实例使用 CKEDITOR.tools.callFunction

Javascript 交换图像

javascript - 错误 [ERR_REQUIRE_ESM] : require() of ES Module not supported

javascript - Google 电子表格中月份的滚动方案(从当前日期自动更新)

javascript - 在 jquery 选择器中获取 id 或类名使用 PHP 的正则表达式

javascript - react-native 可滑动手势在 android 上不起作用?

javascript - 如何将我的子对象推送到数组?