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

我正试图根据视窗大小和像素密度来调换图像源，以防止手机在加载超大图像的同时仍能为大屏幕的视网膜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   />

这很好-我的问题是关于位置-如果我将它放在

头部

中，那么它会在浏览器看到图像标记之前运行。如果我把它放在

body

的末尾，浏览器会得到所有的小图像源，这使非移动屏幕的http请求数量增加了一倍。

---

有没有一种方法可以让浏览器在javascript运行之前不获取图像，同时在

img

标记的

src

属性中保留一个值，这样我就可以支持不运行javascript的系统了？

我很惊讶你不能这样做。如果希望在DOM包含img标记时运行代码，那么浏览器已经开始加载这些图像了。您可以通过将最小尺寸、最低质量的图像留给较差的非javascript浏览器来最小化影响。@PA。谢谢，这就是我的想法，我已经做到了。

var toresponsive = document.getElementsByClassName("responsivize");
for (var i=toresponsive.length -1; i >= 0;i--){
  toresponsive[i].setAttribute('src',toresponsive[i].getAttribute('data-full'));
}