jQuery 动态 CSS 加载奇怪的行为

Question

我正在开发的应用程序需要动态加载CSS和JS，目前解决方案如下:

myapp.loadCss = function(css){
       $("head").append("<link>");
       cssDom = $("head").children(":last");
       cssDom.attr({rel:  "stylesheet",
                 type: "text/css",
                 href: css
                });  
}

myapp.loadJs = funciton(js){
...
//$.ajax call is used in synchronized mode to make sure the js is fully loaded 
}

}

当需要加载一些widgets时，通常用be调用

myapp.loadCss('/widgets/widget1/css/example.css');
myapp.loadJs('/wiggets/widget1/js/example.js');

奇怪的是，有一段时间(10 次或 20 次)，example.js 新创建的 dom 元素将无法从 example.css 获取其 CSS，但我的 loadCss 方法似乎没有以同步模式加载 CSS？我尝试用以下代码替换我的 loadCss:

myapp.loadCss(css){
 $('<link href="' + css + '" rel="stylesheet" type="text/css" />').appendTo($('head'));

}

然后好像就可以了(为了验证我刷了一百次网页:-( )但不幸的是这个方法在IE中失败了(IE7，在IE6、8中没有测试过)

有没有更好的解决方案？

Answer 1

首先你可以写

 cssDom = $("head").append("<link>");

这会有所帮助，因为您的脚本的两次调用几乎可以同时启动，结果您将添加两个标签，并且只有其中一个将被更改(两次)，因此一个 css 将丢失。

关于 IE7 - 以我自己的经验最常见的错误 - 为动态对象中的最后一个元素添加逗号

var zzz = {a:'a', b:'b',}