檢測CSS文件何時完成切換

我有一個頁面，允許用戶動態更改加載的主題（樣式表）。我有一個存儲當前加載的樣式表的themeStyle<link>元素。我正在切換它檢測CSS文件何時完成切換

function switchTemplate(stylePath){ 
    var ns = $('<link>', { 
      href: stylePath, 
      id: 'themeStyle', 
      type: 'text/css', 
      rel: 'stylesheet' 
     }); 
    $('#themeStyle').replaceWith(ns); 
    self._cssIsLoaded(ns.get(0), stylePath); 

}

然後使用this function來檢測它是否已加載。

它只是偶爾工作，但我意識到它可能永遠不會工作，因爲#themeStyle css將永遠加載，但不一定會改變。

我添加了傳遞給_cssIsLoaded函數的css文件路徑，但它在加載完成前發生了變化，所以我不知道用來檢查它是否已經切換。

我現在能想到的唯一解決方案是在每個樣式表中都有一個隱藏div stylePath作爲content：元素，並檢查該div的內容是否是正確的stylePath ...但需要更改每個樣式表， HTML的和 JS以及只是有點cludgy。有沒有更合理的方法來實現這一點？

編輯：我想過在最後加入新的樣式，但有可能並非所有的樣式都會被新的樣式覆蓋。總是有一個基本樣式表，並且這些加載的特定規則僅影響頁面的一部分。

來源

2011-09-08 Damon

我的風格標籤的ID後面加上一個遞增的數字解決，當我切換的風格，我添加了新的樣式表，並刪除舊的，然後用新的號碼檢查，看看如果它已被加載。

function switchTemplate(stylePath){ 
    var osid = $('[id^="themeStyle-"]'); 
    var stylenum = osid[0].id.split('-')[1]; 
    var newstylenum = (Number(stylenum) + 1).toString(); 
    var ns = $('<link>', { 
      href: stylePath, 
      id: 'themeStyle-' + newstylenum, 
      type: 'text/css', 
      rel: 'stylesheet' 
     }); 
    $("head").append(ns); 
    $('#themeStyle-' + stylenum).remove(); 
    _cssIsLoaded(ns.get(0), stylePath); 
}

來源

2011-09-20 19:32:03 Damon

一個簡單的解決方案是使用JS來改變body元素上的類。然後我會有2套CSS。每個集合都有其所有選擇器，前面加上放在body元素上的類。因此，像

<link href="theme1.css" /> 
contains: 
body.theme1 a { color: #ff000; } 

<link href="theme2.css" /> 
contains: 
body.theme2 a { color: #0000ff; }

來源

2011-09-08 15:58:55

這比我想象的更加優雅。不過，我真的很喜歡這種方式，不需要我改變我所有的CSS文件，或者將大量的CSS文件放在彼此的頂部。我需要'加載完成'功能的原因是js響應某些元素的不同位置 – Damon

檢測CSS文件何時完成切換

回答

相關問題