1

ここに私の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>

メディアクエリの解決策を見つけようとしています。モバイルでは、私の小さな画像のみをロードします。タブレットで、モバイル イメージのロードと大きなイメージのロードを開始します。

4

1 に答える 1

3

はい。方法を選択します。

  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;
}
于 2013-08-28T15:12:56.853 に答える