解決動態載入CSS失敗的問題：不要修改<link>標籤的屬性 / Why Loading CSS Dynamically Fail: Don't Modify <link> While Loading
我在KALS專案中有用到以jQuery動態載入CSS的技巧，但是最近在Chrome上卻意外不能執行。研究之後才發現這是因為我在載入CSS途中去修改CSS載入標籤的title屬性，造成CSS載入失敗。解決方法是應該在建立載入CSS的標籤時就加入title屬性，而不要事後修改。
載入CSS失敗的案例 / Fault Example
接著我們來看一下㑹失敗的案例。這個例子必需要用Google Chrome 53.02785.116m版以上開啟才會發生，在Firefox或IE上面則不會遇到這個問題。請注意看JavaScript程式碼裡面的內容，我在建立了標籤之後就插入到裡面，此時CSS會載入。但我又在後面修改了標籤的title屬性，就造成CSS載入中斷了。
- CSS程式碼：style.css
body {
color:red;
} - HTML程式碼：load_css_fault.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
這是錯誤的例子：CSS沒有正常載入，文字還是黑色的。
<script>
$(function () {
var _link = $('<link href="style.css" type="text/css" rel="stylesheet" />');
_link.appendTo("head");
// 修改link屬性
_link.attr("title", "global");
});
</script>
</body>
</html>
運作結果：
成功的案例 / Workable Example
接下來我們換一個改良後的程式碼。CSS依舊是同一個檔案，不過JavaScript裡面的敘述有所修改。我在建立標籤的時候設定了title屬性，然後才插入到裡面，這樣子CSS就能夠正常讀取了。
- HTML程式碼：load_css_success.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
這是正確的例子：CSS有正常載入，文字變成紅色的。
<script>
$(function () {
var _link = $('<link href="style.css" type="text/css" rel="stylesheet" />');
// 提前修改link屬性
_link.attr("title", "global");
_link.appendTo("head");
});
</script>
</body>
</html>
運作結果：
