獲取JavaScript來放棄CPU，以便瀏覽器可以應用新的樣式表？

在加載時，我的網站，如果用戶使用替代主題運行此代碼：獲取JavaScript來放棄CPU，以便瀏覽器可以應用新的樣式表？

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css"); 
AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() { 
    AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage); 
    });

AJAX_LoadResponseIntoElement做什麼應該是顯而易見的，但這裏的ReplaceJSCSSFile的簡短說明：它基本上搜索中link元素該網頁與他們src屬性等於「CSS/skin1.css」，在該點它創建一個新link元件（SRC =「CSS/skin2.css」），並使用.parentNode.replaceChild來代替舊與新。

這個問題是initPage()設置屏幕上相對於靜態元素位置移動的位置和某些div。這些靜態元素的位置是從CSS中提取的，但是在代碼運行之前CSS沒有被應用，並且因此initPage()將事情放在錯誤的位置。

我一直在使用一個回調嘗試：

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css", function() { 
    AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() { 
     AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage); 
    }); 
});

不幸的是，這並不工作。據推測，它會告訴瀏覽器更換CSS文件，只要它告訴瀏覽器這樣做，它就會轉到回調函數，使用AJAX獲取頁面內容。我認爲頁面內容在CSS文件之前回來，這就是爲什麼在執行initPage()時新的CSS沒有被應用。

是否可以解決這個問題，而不使用替代樣式表？

，我可以拿出比其他備用樣式表的唯一的事情是獲取與AJAX CSS的內容（這實際上會等待執行的回調函數之前，服務器的響應），以取代「CSS/skin1.css 「link元素。

來源

2011-02-12 TimFoolery

您可以在回調中使用它並使用setTimeout，以便回調的主體在稍後才能運行。這給瀏覽器一些時間來恢復。

來源

2011-02-12 13:02:26 Raynos

This Works ... thanks。謝謝。我認爲我要做的是做某種繼續（）函數。它基本上只會執行10ms的超時，直到檢測到CSS更改。我也會嘗試我在OP中提到的AJAX解決方案。但現在，這是一個足夠快的解決方案。謝謝！ – TimFoolery 2011-02-12 16:53:06

您也可以嘗試合併您的css文件，並簡單地將添加（或刪除）自定義CSS類的主題切換到您的HTML標記。這會加速事情。

來源

2011-02-12 13:25:32 achairapart

通常我會說這不是一個壞主意，但是看到我最終可能會有10個不同的主題，我認爲這會帶來很多額外的不必要的帶寬。我很欣賞答案，但我不知道這對我來說是最好的選擇。 – TimFoolery 2011-02-12 16:41:16

獲取JavaScript來放棄CPU，以便瀏覽器可以應用新的樣式表？

回答

相關問題