加載CSS

Question

由於一些其他的約束我必須通過jQuery來加載我的CSS是這樣的：

$('head').append($('<link rel="stylesheet" type="text/css" />') 
     .attr('href', 'http://path/MyCSS.css')); 

的問題是，通常jQuery的頁面加載功能

$(function() { 
    myFunc(); 
}); 

不按預期方式工作。 myFunc應該做一些與加載CSS相關的內容。現在，因爲我無法確定何時將CSS下載並添加到我的HTML中，我不知道如何以及何時調用myFunc？

Answer 1

你應該可以通過修改上面的內容來做到這一點，但可以在一次調用中完成。

$('head').append('<link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css">'); 

這不起作用，即小於8，所以你需要：

1. 設置它的href前追加;或
2. 使用IE的document.createStyleSheet（）方法

Answer 2

隨着AJAX調用可以確保您的整個CSS加載。

$(document).ready(function() { 
    $.ajax({ 
     url: 'your_css_link', 
     dataType: 'text', 
     success: function(css) { 
      $('<style type="text/css">\n' + css + '</style>').appendTo("head"); 
      myFunc();     
     }     
    }); 
}); 

Answer 3

您嘗試使用負載，而不是準備好了，有時工作N_N

鏈接元素具有負載和錯誤事件，因此，如果CSS加載

Answer 4

有你可以用它們來確定很多掛鉤到鏈路上的樣式表標籤加載事件，但問題你可以使用image.onerror loading hack

var head = document.getElementsByTagName("head")[0], 
    body = document.body, 
    css = document.createElement("link"), 
    img = document.createElement("img"), 
    cssUrl = "/path/to/a/css/file.css"; 

css.href = cssUrl; 
css.rel = "stylesheet"; 
head.appendChild(css); 

img.onerror = function() { 
    // Code to execute when the stylesheet is loaded 
    body.removeChild(img); 
} 

body.appendChild(img); 
img.src = cssUrl; 

然後在img.onerror方法：

img.onerror = function() { 
    body.removeChild(img); 
    jQuery(function($) { 
     // stylesheet is loaded and the DOMContentLoaded event is also fired 
    }); 
}