爲什麼Chrome的使用<img srcset>`

jsbin 爲什麼Chrome的使用<img srcset>`

img { 
 
    width: 100%; 
 
}

<img srcset="http://lorempixel.com/400/200 400w, 
 
       http://lorempixel.com/300/200 300w, 
 
       http://lorempixel.com/200/200 200w">

嘗試調整功能，JS斌在Chrome〜61不斷要求新的圖像。圖像不斷變化，甚至超過400像素的標誌。

Firefox OTOH更符合邏輯 - 它的分辨率爲300像素和200像素，就像我所期望的一樣。

400px寬是我的srcset中最寬的圖片，那爲什麼Chrome會重新獲取新圖像，即使參數沒有改變？

來源

2017-10-19 mpen

首先，在你的代碼的幾個問題：

它缺乏src屬性，它是按規格強制性的，即使瀏覽器處理它時，它的缺失。
它缺乏sizes屬性，當你在srcset使用w描述現在是強制性的，即使瀏覽器處理它時，它的缺失，使得它100vw。
您在srcset中列出的圖像應具有相同的寬高比。如果您想使用不同的寬高比，那就是藝術指導，並且您需要使用<picture>。

但是，這些問題可能不是你麻煩的原因。

看起來確實像Chrome有問題，試圖在增加視口寬度時重複查找新圖像，而HTML告訴它源是srcset是最大的。

來源

2017-10-20 07:58:02

我相信這裏的問題是由於您的示例中的圖像具有Cache-Control: no-store指令，這使得它們繞過瀏覽器的內存緩存。我不清楚這裏指定的行爲應該是什麼，但避免此問題的最佳方法是避免發送帶有no-store指令的圖像。假設他們不包含任何隱私敏感信息（例如銀行信息），他們沒有理由成爲no-store。

來源

2017-10-31 10:47:23

當然，這可以解釋爲什麼圖像會在每次請求新圖像時發生變化，但它仍然無法解釋爲什麼要求首先要求新圖像。 Chrome沒有理由假定圖像在斷點之外發生了變化。 – mpen

爲什麼Chrome的使用<img srcset>`

回答

相關問題