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

Question

here my 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;
    }
}

If my screen is bigger than 768px, my browser load header_tablet.jpg only Can I force my browser to load header_mobile.jpg before with media queries ?

edit: for know what I'm doing is this:

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

I try to find a media queries solution. on mobile load only my small picture. On tablet start to load my mobile image and load my big image.

Answer 1

Yes. Pick a method.

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; }