如何確定一個鏈接資源成功加載

我用下面的JavaScript動態加載樣式表是否：如何確定一個鏈接資源成功加載

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink'); 
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
}

有什麼方法來確定新的CSS文件是否加載成功？如果失敗，我希望能夠應用默認樣式表。

來源

2011-04-09 zildjohn01

這可能是一種方法：使用AJAX獲取文件後檢查響應代碼。 – pimvdb 2011-04-09 20:59:45

理想情況下，您可以在開始時加載它們，然後在之間切換。

http://www.alistapart.com/articles/alternate/

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

這並沒有真正回答這個問題，但我認爲這種方式是首選。

來源

2011-04-09 21:40:36 raylu

我建議通過ajax加載，檢查用戶pimvbd提到的響應，還可以在樣式表的末尾放置一個虛擬規則，用可檢查的聲明來設置隱藏元素的樣式。例如，給一個隱藏的div邊框：987px，並檢查隱藏的div的邊框是否實際上是987px。是的，它引入了對該風格和該元素的依賴關係。我已經與很多人進行過無休止的討論，而且還沒有更好的方法。希望弄點兒關注在不久的將來的瀏覽器版本...

來源

2011-04-13 19:33:58

您可能希望看到我的回答另一個類似的問題在這裏： Detect and log when external JavaScript or CSS resources fail to load

基本上，你可以添加一個onload回調，以查看文件已加載。（如果你通過JS加載當然）

來源

2011-04-18 21:14:42 joseeight

最簡單的方法是在分配新的href後檢查link元素的styleSheet.cssText屬性。

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink');  
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
    if (link.styleSheet.cssText) { 
    //if not empty string, it was loaded 
    } 
    else { 
    link.href = "default.css"; 
    }

或者，有一個「onerror」事件，當資源在href分配後未能加載時觸發。

來源

2011-04-29 13:16:40 panpawel

有一種解決方案不需要javascript或檢測樣式表是否加載。

看來你也可以將默認樣式應用於內置樣式表，然後讓動態加載樣式表覆蓋默認值。如果新的樣式表沒有加載，默認情況下已經加載並且沒有進一步的工作。如果新的樣式表加載，它會覆蓋默認值並顯示新的樣式。

來源

2011-06-27 09:19:29 jfriend00

如何確定一個鏈接資源成功加載

回答

相關問題