javascript - 交换图像源，同时避免额外的 GET 请求，维护支持和语义

Question

我正在尝试根据窗口大小和像素密度交换我的图像源 - 以防止手机加载超大图像，同时仍将全分辨率图像提供给具有大屏幕的视网膜 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   />

我在下面使用vanila javascript（不想等待lidbaries加载）（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 请求数量翻倍。有没有办法让浏览器在运行 javascript 之前不获取图像，同时在标签的src属性中保留一个值，img以便我支持不运行 javascript 的系统？