10

こちらで説明されているように、srcset を使用してレスポンシブ画像を実装したかったので、ユーザーがロードする画像 src は、ユーザーの解像度に最も似ています。

問題は、私がこのテストを行ったのですが、ビューポートの変更に反応しないということです。

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle: http://jsfiddle.net/ad857m1r/9/

私が見逃しているものは何か分かりますか？

4

3 に答える 3

9

属性は最初のsrcset読み込み時にブラウザによって解釈され、次に読み込まれた画像が保存されcache、ページをクリアして再読み込みするまで、ブラウザは他の画像を読み込まない場合cacheがあります。

srcsetページの各イベントで を再解釈する場合resizeは、各 の最後に確率変数を追加して更新する必要がありますurl。その後、ブラウザはその画面サイズに適したものを再読み込みします。

実行回数を減らすために、このプロセスに遅延を追加しました。この方法では、ブラウザーはサイズ変更のたびに正しい画像をダウンロードする必要があり、これは帯域幅に悪影響を及ぼします。この手法の使用はお勧めしません。ブラウザが状況ごとに使用する画像を決定します。ビューポートのサイズ変更は、日常の環境では一般的な状況ではないと思います。@KrisDが言ったように、 picture要素を使用する（古いブラウザと互換性を持たせるためのいくつかのアプローチを使用する）方が目的に適しているかもしれません。

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

于 2016-01-09T13:19:27.037 に答える
0

コピーして貼り付けるだけです。最初に知っておく必要があるのは、画像のサイズを昇順で並べる必要があり、それに従って調整する必要があることです。

例えば

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

これにより、結果を表示できます。これを試してみましたが、動作しています

img {
  width: 100%;  
}
<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

メモ -> 画像をimage.jpgとして呼び出すと、より効果的です。

于 2016-01-16T04:19:28.037 に答える
0

あなたが言及したリンクの例のコードを適用しようとすると、例のコードをほとんど編集しませんでした:

1-サイズ属性値を設定するとき、例で説明したように最後の値とデフォルトを280に設定しますが、直前の値は280とは異なり、580でした

2-画像リンクの最後にスラッシュを作成した画像のダミージェネレーターの1つを使用する場合、画像をそのサイズにバインドする前にスペースがあり、これは画像ジェネレーターサイトによって画像上のテキストで翻訳されていますあなたが言及した例のリンクで説明されているのと同じになるように、コードを次のように変更する必要があります

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />
于 2016-01-13T23:41:45.920 に答える