Javascript 不同分辨率的不同背景图像集

我使用全屏背景图像幻灯片放映29幅图像。图像在（1366 x 769）像素分辨率上显示完美，但当我使用低于此分辨率的其他分辨率时，图像的大部分部分未显示。当分辨率太大时，背景色（白色）出现在右侧和底部

我用javascript检查屏幕分辨率的方法是-

<script type="text/javascript">
if ((screen.width=1400) && (screen.height<=900)) {

}
if ((screen.width=1366) && (screen.height<=768)) {

}
else {

}
</script>

如果（（screen.width=1400）&（screen.height使用CSS设置背景，然后尝试媒体查询


比如：

@media (width: 800px) {
    body {
        background-image: url('image1.jpg');
    }
}

@media (width: 1200px) {
    body {
        background-image: url('image2.jpg');
    }
}

或者用不同的文件来做


或者在结尾编写自己的脚本。如果需要，可以使用jQuery并附加css文件

<script type="text/javascript">
    jQuery(document).ready(function() {
        var $background = jQuery('<img class="background" src="fallback.jpg" alt="" />');

        if (jQuery(window).width() == 1400 && jQuery(window).height() <= 900) {
            // jQuery('head').prepend('<link href="styles1.css" ... />');
            // or
            $background.attr('src', 'image2.jpg');
        }

        [...]

        $background.appendTo('body');
    });    
</script>

<style type="text/css">
    img.background {
        /* style your background e.g. */
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 0 none;
    }
</style>


jQuery（文档）.ready（函数（）{
var$background=jQuery（“”）；
如果（jQuery（window）.width（）==1400&&jQuery（window）.height（）为了避免加载错误的图像，我会从一开始就用Javascript添加这些图像标记。然后，您只需使用您在第一个Javascript片段中确定的对应路径添加它们

我想说的一件事是，你不应该尝试精确匹配宽度。匹配方式与屏幕高度相同。我之所以这么说，是因为访问者可能没有最大化他们的窗口，并且分辨率可能不是你期望的（例如，我今年的webstats显示了100多种完全不同的屏幕分辨率）

此外，您可能不应该使用.width属性，而应该使用availWidth。这将防止出现用户没有最大化其浏览器窗口的问题，以及用户可能打开侧栏（书签等）而侵蚀显示区域的问题

如果图像已经在页面上，并且您无法更改，您可以使用Javascript更改它们的SRC属性。这意味着最多只能加载两组图像。由于您没有提供更多关于该示例的HTML，因此我无法说明具体选择这些图像的代码。它们是否都存在于一个具有这是一个特定的ID，还是它们都共享一个你没有放在示例中的class属性？
选择jQuery插件。超大是我的最爱之一

我不能使用CSS，因为图像的总大小超过5mb。如果我使用CSS，它将加载所有图像，我不想这样做。我希望它只加载该分辨率的特定图像集。algorhythem，CSS媒体查询无法解决所有这些资产都将加载的问题，即使它们没有被使用。这对于影响所有主要浏览器的媒体查询来说，这是一个不幸的问题。@AshleySheridan好的，这对我来说是新问题，而且很糟糕：-（有没有办法更改javascript.jQuery（'.dom元素'）.text（'text here'）中的html文本）；有什么方法可以改变div图像的来源吗？我已经在使用它了，但是当图像超过5个时预加载失败，在我的例子中，我使用的是29个。所以我有点切换：）
@media (width: 800px) {
    body {
        background-image: url('image1.jpg');
    }
}

@media (width: 1200px) {
    body {
        background-image: url('image2.jpg');
    }
}

<script type="text/javascript">
    jQuery(document).ready(function() {
        var $background = jQuery('<img class="background" src="fallback.jpg" alt="" />');

        if (jQuery(window).width() == 1400 && jQuery(window).height() <= 900) {
            // jQuery('head').prepend('<link href="styles1.css" ... />');
            // or
            $background.attr('src', 'image2.jpg');
        }

        [...]

        $background.appendTo('body');
    });    
</script>

<style type="text/css">
    img.background {
        /* style your background e.g. */
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 0 none;
    }
</style>