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");
    }
});