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

你得到了不稳定的行为，因为浏览器不应该在window.onresize期间进行如此繁重的计算。此事件每秒可以发射数百次，并且您绝对不希望一直请求，提供，下载和解析100个AJAX请求的队列。

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

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

Answer 2

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

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而不是每次调整大小时都会替换

使用jquery动态加载css文件

2 个答案: