360.jpg 1200w

 

1200.jpg 9999w

 

這時瀏覽器把 360 的圖當成了 1200 來用了。這里可能有些疑問，圖像的寬度為什么不是90vw 了哪?因為瀏覽器被騙了但是自己卻不知道，他依然按照 1200 的圖像，去適配 dpr。414 * 90% *(360 / 1200)約等于 111.7。這種方式很智能，瀏覽器根據你的 sizes，從 w 列表中選擇最合適的圖像來調用顯示。

 

如果我們需要更精確的控制瀏覽器在什么視口大小下顯示多大的圖像，可以使用 picture 元素。

 

當視口大于 960 像素時，會加載 960.jpg。大于 768 像素時，會加載 768.jpg。視口小于768，則加載默認圖像。雖然不是每個瀏覽器都支持 picture 元素，還可以使用 Picturefill polyfill。

 

加載以及顯示策略

 

多圖渲染的情況下，結合懶加載，又要保證圖像的渲染速度，類似知乎的渲染效果，我們可以使用 progressive-jpg。

 

相比 baseline-jpg 一行一行的掃描并顯示圖片，當然都是從弱網角度考慮，這種顯示可能更合適。但還是有不足。參考了下知乎和 medium 等網站的示圖效果，可以進行模擬：

 

先創建一個為圖片占位的預留塊，在這個塊中會展示圖片。塊中有另外一個塊會先設置一個 padding-bottom 來撐起塊的高(即保證需要加載圖像也是這個寬度高度的比例)。這樣防止圖片在加載時發生重排。

 

加載一個輕量版的圖片。這個時候會先請求一個圖片的縮略圖。并使用模糊 blur 效果

 

等滾到到可視區域，加載高質量圖，加載完畢后取消模糊效果。

 

medium 下的實現方式更為復雜點，是在縮略圖加載完畢后，繪制到 canvas 畫布，再通過一個自定義的模糊函數，類似于 StackBlur，同時請求高質量圖。等到請求完，再隱藏畫布。