做最新的Chrome/Opera獲取srcset錯誤？

我工作具有以下的標記在頁面上：做最新的Chrome/Opera獲取srcset錯誤？

<img 
alt="" 
src="/banner_home.300x200.jpg" 
srcset="/banner_home.300x200.jpg 320w, 
     /banner_home.600x400.jpg 480w, 
     /banner_home.728x242.jpg 768w, 
     /banner_home.920x306.jpg 960w, 
     /banner_home.1234x400.jpg 1280w">

，似乎在最新的Chrome &歌劇，他們忽略任何屏幕尺寸，只是輸出哪個文件被列爲最後的（所以在我的情況下是1234x400.jpg）。

使用Picturefill，Firefox和Safari都能在較小的屏幕上顯示正確的圖像。

在我今天測試的過程中，我推出了一段時間沒有打開的Opera。當它第一次啓動時，它是在第25版，它會在較小的屏幕尺寸下顯示正確的圖像。

然後我注意到一個更新已經下載了，所以我運行它，更新到v27，然後Opera顯示與最新的Chrome相同的問題。

因此，最近似乎在Blink中發生了一些變化。

其他人可以證實這一點，或者我只是做錯了嗎？

Codepen說明我的意思。

來源

2015-02-06 Tyssen

你拿着測試是錯誤的：d

一個change是進入Chrome的40意味着，當一個高密度的資源可用在高速緩存中（例如，在您的例子中，最大的圖像），這是會被選中的資源，因爲重新下載不同的，更低分辨率的資源沒有意義。

如果你真的想測試哪些資源在較小的設備上下載（不是你應該依靠哪個資源被選中，因爲srcset不是這樣的），你可以在實際設備上測試，或者打開隱身會話，調整瀏覽器的大小（或模擬設備），然後才加載測試頁面。

我也創建了一個slightly clearer test case，當你可以看到哪個圖像被加載。

另外：從你的例子看來，你正在srcset中使用不同比例的圖像。這不是你應該使用srcset，而是使用<picture>，提供關於哪些資源被加載的擔保，所以你的佈局不會因爲加載了錯誤的圖像而中斷。

當您使用srcset時，沒有「錯誤」的圖像。瀏覽器可以自由選擇它認爲合適的一個（因爲它在緩存中，連接性低，用戶偏好等等）。

來源

2015-02-06 14:55:38

如果您將其粘貼到您的控制檯中，您將看到在瀏覽器中呈現的圖像源。（'。your-image-class img'）。prop（'currentSrc'））;}}

來源

2015-02-17 15:33:48 starryeyez024

做最新的Chrome/Opera獲取srcset錯誤？

回答

相關問題