4

我一直在尝试通过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）。

您的帮助将不胜感激。

4

2 回答 2

2

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

于 2015-09-21T07:25:28.257 回答
0

看起来语法工作正常（它在实际的移动浏览器上测试成功）。

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

感谢大家的帮助。

于 2015-09-21T17:23:17.040 回答