响应 <img> 标签检索错误的 src

Question

我一直在尝试通过根据上下文检索最合适的 src 来让某个图像标签做出响应。

标签如下所示：

<img
    id="picimg"

    src="image.jpg"

    srcset="image-300x281.jpg 300w,
            image-1024x961.jpg 1024w,
            image.jpg 1664w"

    sizes="(max-width: 499px) 92vw,
            (min-width: 500px) 86vw,
            (min-width: 960px) 96vw, 96vw"
>

我什至尝试过此代码片段（位于：http://blog.cloudfour.com/responsive-images-101-part-2-img-required/）来检查每次哪个 src 有效。

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

但是，无论浏览器及其宽度如何，src 似乎永远不会改变（它似乎总是 image.jpg）。

我怀疑，通过重复相同的默认 src 作为 srcset 属性中的最后一项，它可能会影响结果。否则，决定因素可能是默认大小（sizes 中的最后一项）。

非常感谢您的帮助。

Answer 1

如果您一开始使用宽 window 以便最大的图像是最合适的，那么 Chrome/Opera 在缩小 window 时将不会下载较小的图像。参见

Answer 2

语法似乎工作正常（在实际的移动浏览器上测试成功）。

我只是不知道为什么检查 src 的脚本不能正常工作。

谢谢大家的帮助。

响应 <img> 标签检索错误的 src

Responsive <img> tag retrieving wrong src

html

javascript

srcset