と属性<img>の両方が動的に設定される遅延読み込みソリューションを使用します。srcsrcset
画像のsrcとsrcset属性の両方が既に HTML (従来) に存在する場合、srcset 対応ブラウザは を安全に無視srcし、srcset リストから選択された 1 つのリクエストのみをトリガーします。(この男はそれが機能すると言っていますが、HTML からトリガーされる 2 つのリクエストは、実際には最近までChrome のバグでした。)
<img src=""
data-lazy="fotos/000_180x120.jpg"
data-lazy-srcset="fotos/000_180x120.jpg 180w,
fotos/000_360x240.jpg 360w,
fotos/000_720x480.jpg 720w,
fotos/000_1080x720.jpg 1080w,
fotos/000_1440x960.jpg 1440w,
fotos/000_2160x1440.jpg 2160w"
sizes="(min-width: 700px) 700px,
100vw">
src最初は空です。JavaScript では、srcとsrcset属性の両方が属性の値に設定されdata-ます。
ここで、html で属性が既に設定されている場合とは異なり、両方の属性を設定すると 2 つのリクエストがトリガーされます。これは、最初に設定された属性に適用されます。src設定前に設定srcsetすると、すでに 1 つの要求が発生することは理解できます。
私が望むのは、後で設定され、他のブラウザのフォールバックとして意図されている属性srcsetを無視しながら、設定してから srcset 対応のブラウザに一致を見つけさせることです。src
srcset + フォールバックを遅延読み込みした経験のある人はいますか?