ウィンドウサイズとピクセル密度に応じて画像ソースを交換しようとしています-巨大な画面を備えたRetina MacBookなどにフル解像度の画像を提供しながら、モバイルが非常に大きな画像をロードするのを防ぐため. 次のような img 要素があります。
<img class="projectimg responsivize" src=mobile.jpg data-mobile-x2=mobile-retina.jpg data-tablet=tablet.jpg data-tablet-x2=tablet-retina.jpg data-full=desktop.jpg data-full-x2=desktop-retina.jpg />
私はバニラjavascriptを使用しています（リッドバリーがロードされるのを待ちたくない）以下（WIP、画面サイズのテストが必要、現時点ではフルサイズの画像に交換するだけです）
var toresponsive = document.getElementsByClassName("responsivize");
for (var i=toresponsive.length -1; i >= 0;i--){
toresponsive[i].setAttribute('src',toresponsive[i].getAttribute('data-full'));
}
これは正常に動作しています-私の質問は配置についてです-配置するとhead、ブラウザが画像タグを表示する前に実行されます。の最後に置くと、bodyブラウザはすべての小さな画像ソースを取得し、モバイル以外の画面に対する http 要求の数を 2 倍にします。タグのsrc属性に値を残しながら、javascript が実行されるまでブラウザが画像を取得しないようにして、javascript を実行していないシステムをサポートする方法はありますか?img