瀏覽器正在加載兩個圖像 - 一個用於srcset，一個用於src（Chrome 41等）

我在我正在開發的網頁上使用srcset屬性。瀏覽器正在加載兩個圖像 - 一個用於srcset，一個用於src（Chrome 41等）

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 1200w, 
    img/picture-374x226.jpg 992w, 
    img/picture-305x185.jpg 768w, 
    img/picture-707x428.jpg 300w" />

如果我檢查哪些資源獲取加載頁面時，我看到的Chrome 41和FF使用填充工具以及Safari瀏覽器7總是加載圖像兩次 - 一次全分辨率，一旦按大小來自srcset屬性。我在這裏做錯了什麼？

來源

2015-04-18 Miglosh

你可以請你提交一個測試用例，你會發現在Chrome中發生這種情況嗎？對於不支持的瀏覽器，'src'會在polyfill做它的事情之前觸發下載，但在Chrome中，這應該不是 –

遲到的情況。我使用透明的gif作爲源代碼'' –

我觀察到同樣的問題。此外，我正在使用具有不同寬度/高度關係的不同屏幕尺寸的圖像的藝術方向，這使得問題更加嚴重，因爲錯誤的藝術方向最初被加載和顯示，但甚至不適合佈局。當然只有在使用網絡節流時才能看到效果。 – Silentdrummer

我有類似的問題，我發現如果src圖像不是srcset圖像中可用的那些圖像，瀏覽器將加載src圖像，無論如何。解決方案是確保src圖片網址與srcset圖片網址之一匹配。

順便說一句 - 據我瞭解規格，圖像url後面的w值應該（大致）匹配圖像的寬度。這允許瀏覽器根據sizes屬性和設備像素密度來最好地確定要顯示的圖像。因此，您應該更改標記中的w值並添加sizes屬性（它允許您使用媒體查詢和後備即可讓瀏覽器瞭解渲染的圖像大小，即(min-width: 640px) 600px, 50vw）。考慮下面的例子：

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 820w, 
    img/picture-707x428.jpg 707w, 
    img/picture-374x226.jpg 374w, 
    img/picture-305x185.jpg 305w" 
    sizes="100vw">

來源

2016-02-16 14:08:05 homerjam

瀏覽器正在加載兩個圖像 - 一個用於srcset，一個用於src（Chrome 41等）

回答

相關問題