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