jquery - レスポンシブ画像のこのシステムは良い習慣ですか? html5 データを使用していますか?

Question

レスポンシブ/アダプティブ画像のいくつかの手法を検索して試しましたが、それらのほとんどが html5 キャッシュ マニフェストに干渉することがわかりました。

この方法が良い方法であるかどうかについてフィードバックをお願いします (注: スクリプトが実行されるまで画像のダウンロードを遅らせますが、画像リソースの二重ダウンロードを防ぎます)。

典型的なhtml:

<img data-name="001.jpg">
<img data-name="002.jpg">
<img data-name="003.jpg">

JavaScript：

var fullTest=$(window).width();
if ((fullTest < 1025) && (fullTest > 600) ){
    var imageFolder = 'photos/medium/';
    console.log('medium images');
} else if (fullTest > 1024) {
    var imageFolder = 'photos/large/';
    console.log('large images');
} else {
    var imageFolder = 'photos/';
    console.log('small images');
}

$('img').each(function () {
    imageName = $(this).data('name');
    if (imageName){
       $(this).attr('src', imageFolder + imageName);
       console.log(imageName+"was changed");
    } else { 
        console.log($(this).attr('src')+" was not changed");
    }
});