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 
} 

} 

當一些部件需要進行負載，與通常的通話是

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

奇怪的是，一旦一段時間（1出10或20），從example.js新創建的DOM元素將無法得到example.css其CSS然而，似乎我的loadCss方法不會在同步模式下加載CSS？我曾試圖與下面的代碼來代替我的loadCss：

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

} 

這似乎是OK，然後（我刷新網頁驗證:-(百倍） 但不幸的是這種方法在IE中失敗（IE7在IE6沒有測試過，8）

對此有任何更好的解決方案？

Answer 1

首先，你可以寫

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

這可以提供幫助，因爲潛在的兩個腳本調用幾乎可以在同一時間開始，因此您將添加兩個標籤，並且只有其中一個標籤將被更改（兩次），因此一個css將會丟失。

關於IE7 - 從我自己的經驗，最常見的錯誤 - 添加逗號對動態對象的最後一個元素

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