html - 我可以强制 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;
    }
}

如果我的屏幕大于 768 像素，我的浏览器仅加载 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;
   }