使用jquery动态加载css文件

Question

我创建了 4 个不同的 .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>

当我在 chrome 上测试页面时，每次我调整窗口大小时它都会像疯了一样闪烁。 奇怪的是，它在 IE8 和 firefox 上运行得非常好。

这是页面的工作示例；

testing page

我有一种感觉，每次我调整窗口大小时，它都会一遍又一遍地加载 css 文件。

在调整窗口大小时，加载css文件也需要一些时间，所以可以预先加载它们吗？

Answer 1

尝试为每个 if 添加另一个条件：

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，而不是每次调整大小时

Answer 2

因为浏览器不应该在window.onresize 期间执行如此繁重的计算，所以您的行为会出现问题。此事件每秒可触发数百次，您绝对不希望一直请求、服务、下载和解析 100 个 AJAX 请求的队列。

我强烈建议您使用媒体查询，并且由于您已经开始使用 Javascript，您可能有兴趣使用 CSS3 media query polyfill for IE6-8。

它更具前瞻性，当您不再需要支持这些旧版浏览器时，您所要做的就是停止使用 polyfill，而不是第二次将所有内容转换为“正确”的 CSS。