背景イメージの読み込みを最適化する

Question

画面の大きさに基づいて背景イメージを選択して読み込む方法をよりスマートにしたいと考えています。

• ユースケース1：私は携帯端末で、小さな背景画像だけが必要です。
• ユースケース2：私はデスクトップブラウザだし、任意の画面サイズ現在

を持つことができ、私はその後、低解像度の背景画像を提供するために、プリロードJSとCSSの組み合わせを使用しています

.bg { 
    position: relative; 
    background-size: cover; 
    background-position: center; 
    background-color: grey; 
    background-repeat: no-repeat; 
    background-image: url('lowres.jpg'); 

    /* add in some media queries here to choose different lowres cropping etc */ 
} 

.bg.highres { 
    background-image: url('highres.jpg'); 
    /* add in some media queries here to choose different highres cropping etc */ 
} 

#highres-loader { 
    display: none; 
} 

と、私のhtmlで：そうのように、そのロードされた後、高解像度のためにそれを交換する高ながら

<div id="highres-loader"> 
    <img src="highres.jpg" onload="add_highres_class_to_background_image_after_it_loads()"> 
</div> 

<div class="bg"></div> 

これは、低解像度の画像をすぐに表示することができます - resはバックグラウンドでロードされます。そして、メディアクエリでは、上記の情報を組み合わせて、デバイスの適切なbgイメージのロードを保証します。素晴らしく見える！

しかし、私は何が起きているのかを知ることができます：1）サイトの残りの部分が完了した後に必然的に大きな画像を優先させることはできません。理想的には、シリアル化する方がよいでしょう。また、この方式では、ダウンロードした画像の数が増えてしまいますが、これは不満足です。

私がこの質問を書いていたとき、私はここでいくつかの調査をしました：https://timkadlec.com/2012/04/media-query-asset-downloading-results/私は考慮する必要があるようです。しかし、この報告書は現在の日付なので、今日の研究で明らかになるものはわかりません。

Answer 1

あなたのアプローチは正しいと思いますが、ページがアクセス可能になると、高解像度画像が読み込まれるようにしたいと思います。私はこれについて多くの研究をしてきましたが、これが働いている唯一の方法であることがわかりました。

<script type="text/javascript"> 
function downloadAtOnload() { 
    // Dynamically load CSS 
    var ls = document.createElement("link"); 
    ls.rel="stylesheet"; 
    ls.href= "css/my-css.css"; 
    document.getElementsByTagName("head")[0].appendChild(ls); 

    // Dynamically load Javascript/jQuery 
    element = document.createElement("script"); 
    element.src = "js/my-js.js"; 
    document.body.appendChild(element); 
} 
if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false); 
else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload); 
else window.onload = downloadAtOnload; 
</script> 

my-js.jsスクリプトの中で、高解像度画像を読み込んで正しいコンテナに入れることができます。