Javascript 检测CSS文件何时完成切换

我有一个页面，允许用户动态更改加载的主题（样式表）。我有一个

themeStyle

元素来存储当前加载的样式表。我就这样换了

function switchTemplate(stylePath){
    var ns = $('<link>', {
            href: stylePath,
            id: 'themeStyle',
            type: 'text/css', 
            rel: 'stylesheet'
        });
    $('#themeStyle').replaceWith(ns);
    self._cssIsLoaded(ns.get(0), stylePath);

}

函数切换模板（样式路径）{
变量ns=$（''）{
href:stylePath，
id:'主题风格'，
键入：“text/css”，
rel:'样式表'
});
$（“#主题样式”）。替换为（ns）；
self.\u cssisload（ns.get（0），stylePath）；
}

然后使用来检测是否已加载

它偶尔工作，但我意识到它可能永远不会工作，因为#主题样式css将始终加载，但不一定会更改

我添加了将css文件路径传递给_cssIsLoaded函数，但是在加载完成之前它会发生变化，所以我不知道用什么来检查它是否已切换

我现在能想到的唯一解决方案是在每个样式表中都有一个隐藏的div

stylePath

作为content:element，并检查该div的内容是否是正确的stylePath。。。但这需要改变每一个样式表、HTML和JS，而且要有点笨拙。有没有更合理的方法来实现这一点

---

编辑：我曾想过只在末尾添加新样式，但有可能不是所有样式都会被新样式覆盖。基本样式表总是存在的，并且加载的这些特定规则只影响页面的一部分。

一个简单的解决方案是使用JS更改body元素上的类。然后我会有两套css。每个集合的所有选择器的前缀都是放置在body元素上的类。大概是

<link href="theme1.css" /> 
contains:
body.theme1 a { color: #ff000; }

<link href="theme2.css" />
contains:
body.theme2 a { color: #0000ff; }

包含：
body.theme1a{color:#ff000；}
包含：
body.theme2a{color:#0000ff；}

我决定在样式标记的id之后添加一个递增的数字，当我切换样式时，我添加新的样式表并删除旧的样式表，然后用新的数字检查是否已加载

function switchTemplate(stylePath){
    var osid = $('[id^="themeStyle-"]');
    var stylenum = osid[0].id.split('-')[1];
    var newstylenum = (Number(stylenum) + 1).toString();
    var ns = $('<link>', {
            href: stylePath,
            id: 'themeStyle-' + newstylenum,
            type: 'text/css', 
            rel: 'stylesheet'
        });
    $("head").append(ns);
    $('#themeStyle-' + stylenum).remove();
    _cssIsLoaded(ns.get(0), stylePath);
}

函数切换模板（样式路径）{
var osid=$（'[id^=“themmestyle-”）；
var stylenum=osid[0].id.split（'-'）[1]；
var newstylenum=（Number（stylenum）+1.toString（）；
变量ns=$（''）{
href:stylePath，
id:'主题样式-'+新闻样式编号，
键入：“text/css”，
rel:'样式表'
});
$（“标题”）。附加（ns）；
$（'#主题样式-'+stylenum）.remove（）；
_cssisload（ns.get（0），stylePath）；
}

这比我想象的要优雅一点。我真的希望有一种方式，不需要我改变我的所有CSS文件，或加载大量的CSS文件在彼此的顶部，虽然。我之所以需要“loadcomplete”功能，是因为js可以响应某些元素的不同位置