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 に答える