这种响应式图像系统是一种很好的做法吗？使用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");
    }
});