使用jquery動態加載css文件

我創建了4個不同的.css文件來處理不同的分辨率。使用jquery動態加載css文件

這裏是我用來基於屏幕寬度加載文件的jQuery代碼。

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="public/_css/normal.css" /> 

<script language="javascript" type="text/javascript"> 
function adjustStyle(width) 
{ 
    width = parseInt(width); 
    if(width >= 1920) 
    { 
     $("#size-stylesheet").attr("href", "public/_css/bigger.css"); 
    } 
    else if (width >= 1600) 
    { 
     $("#size-stylesheet").attr("href", "public/_css/big.css"); 
    } 
    else if (width >= 1366) 
    { 
     $("#size-stylesheet").attr("href", "public/_css/normal.css"); 
    } 
    else 
    { 
     $("#size-stylesheet").attr("href", "public/_css/small.css"); 
    } 
} 

$(function() 
{ 
    adjustStyle($(this).width()); 

    $(window).resize(function() 
    { 
     adjustStyle($(this).width()); 
    }); 
}); 
</script>

當我在鉻上測試頁面時，每當我調整窗口大小時，它都會像瘋了似的閃爍。奇怪的是，它在IE8和Firefox上運行得非常好。

下面是該頁面的工作示例;

testing page

我有一種感覺，每次我調整窗口的大小，它保持了一遍又一遍加載CSS文件。

窗口大小調整時，加載css文件也需要一些時間，所以可以事先加載它們嗎？

來源

2013-08-18 user1778459

你爲什麼不看媒體查詢 –

做媒體查詢在IE8上工作？ – user1778459

@ user1778459好吧，不... –

由於在window.onresize期間瀏覽器不應該執行如此繁重的計算，因此您會收到零星的行爲。這個事件每秒可以觸發幾百次，而且你絕對不希望一直有100個AJAX請求被請求，服務，下載和解析。

我強烈建議使用媒體查詢，由於您已經開放使用Javascript，因此您可能有興趣使用CSS3 media query polyfill for IE6-8。

它更具前瞻性，當您不再需要支持這些傳統瀏覽器時，您只需停止使用polyfill，而不是將所有內容都轉換爲「正確」的CSS。

來源

2013-08-18 11:30:36 Bryce

使用媒體查詢以及你告訴我的polyfill腳本解決了我所有的問題。非常感謝。 – user1778459

嘗試增加其他條件，如果每到：

if(width >= 1920 && !$("#size-stylesheet").attr("href") === "public/_css/bigger.css") 
    { 
     $("#size-stylesheet").attr("href", "public/_css/bigger.css"); 
    } 
    else if (width >= 1600 && !$("#size-stylesheet").attr("href") === "public/_css/big.css") 
    { 
     $("#size-stylesheet").attr("href", "public/_css/big.css"); 
    } 
    ...

這樣，你只能更換一次，CSS，而不是每一次調整大小發生

來源

2013-08-18 11:33:49 Tomer

是的，這是我第一次嘗試修復它，但沒有奏效。我開始想，也許我的Chrome瀏覽器不知何故被打破。因爲它甚至在IE8上工作，這應該是不可能的。 – user1778459

我也看到了我的鉻合金的閃爍 – Tomer

無論如何，如果你這樣做，你應該真的添加這些額外的條件，因爲它會減少很多 – Tomer

使用jquery動態加載css文件

回答

相關問題