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