我可以强制CSS加载带有媒体查询的图像吗？

Question

这里是我的css：

html {
    background: url(../img/header_mobile.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        background: url(../img/header_tablet.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

如果我的屏幕大于768px，我的浏览器只会加载header_tablet.jpg 我可以强制我的浏览器在使用媒体查询之前加载header_mobile.jpg吗？

编辑：知道我在做什么是这样的：

<script type="text/javascript">
    $(window).bind("load", function () {
        if ($("html").width() > 767) {
            $('html').css('background-image', 'url({{ site.url }}/img/header_tablet.jpg)');
        }
    });
</script>

我尝试找到媒体查询解决方案。在移动负载只有我的小图片。在平板电脑上开始加载我的移动图像并加载我的大图像。

Answer 1

是。选择一种方法。

1. HTML

   <img src="img/header_mobile.jpg" width=0 height=0 />
   

2. 的JavaScript

   img = new Image();
   img.src = "img/header_mobile.jpg";
   

3. CSS

   html:after {
       background: url(../img/header_mobile.jpg);
       opacity: 0;
   }