使用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文件

回答

相关问题