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

如果您从一个宽大的窗口开始，使最大的图像是最合适的图像，那么当使窗口变小时，Chrome / Opera将不会下载较小的图像。见https://stackoverflow.com/a/28368483/729033

Answer 2

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

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

谢谢大家的帮助。

响应<img/>代码检索错误的src

2 个答案: