如何知道動態加載的CSS文件何時完全加載並處於活動狀態？

我已經使用在a post on StackOverflow描述的技術動態地一個CSS文件添加到HTML頁面的（在JavaScript）HEAD標記。該方法檢查是否CSS文件已經被完全加載（見同一職位）被作者描述爲「醜」，在我看來這是;-)然而another post建議使用「延遲加載」（見接受的答案在那篇文章中），它考慮到了跨瀏覽器的問題。雖然代碼看起來很好，但對於手頭的任務似乎相當複雜。如何知道動態加載的CSS文件何時完全加載並處於活動狀態？

我的問題是：我還有最後提到的職位（和大量的瀏覽器技術的改進）一年多之後，是否有可靠的，跨瀏覽器的方法來檢查動態加載CSS文件是否已準備就緒使用？

來源

2012-03-29 Jeroen

還有一點：我寧願一個非Ajax（非XHR）方法，也沒有使用任何JavaScript庫，除非有沒有其他辦法。 – Jeroen 2012-03-29 13:52:28

這是否意味着您不必支持任何舊版瀏覽器？ – PeeHaa 2012-03-29 13:54:26

我必須只支持現代瀏覽器。 – Jeroen 2012-03-29 14:08:30

嘗試一些

(function() { 
    function cssLoader(url) { 
     var link = document.createElement("link"); 
     link.onload = function(){ 
      console.log('loaded'); 
     }; 
     link.setAttribute("rel", "stylesheet"); 
     link.setAttribute("type", "text/css"); 
     link.setAttribute("href", url); 
     document.getElementsByTagName("head")[0].appendChild(link) 
    } 

    cssLoader('http://jsfiddle.net/css/style.css'); 

}());

來源

2012-03-29 14:31:17 Joseph

我試過了jsFiddle，但它似乎在Chrome（17）和IE 9中不起作用。我不認爲這些瀏覽器實際上支持（動態）鏈接元素上的onload事件。我認爲至少IE需要onreadystatechange事件。我在我的問題中提到的惰性加載器（https://github.com/LukeTheDuke/Lazyloader/blob/master/lazyloader.js）同時使用onload和onreadystatechange。 – Jeroen 2012-03-29 14:39:46

您可以用img加載CSS文件實現它。

var img = document.createElement("img"); 

img.onerror = function() 
{ 
    console.log("loaded"); 
} 

img.src = url;

點擊此處瞭解詳情：http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/

來源

2013-12-29 20:53:26

如何知道動態加載的CSS文件何時完全加載並處於活動狀態？

回答

相關問題