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 
}

}

当需要加载某些小部件时，通常使用

进行调用

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

奇怪的是，曾经有一段时间（10或20中的1），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',}

jQuery动态CSS加载奇怪的行为

1 个答案: