替代HTTP客戶端提示

Question

我想實現一個解決方案，在該解決方案中，服務器應用程序返回的圖像大到足以覆蓋整個設備屏幕的任何給定方向。

我一直在學習一點關於HTTP Client Hints方法，其中瀏覽器將發送信息以及對圖像的請求，例如屏幕尺寸，像素密度等。然後服務器可以解析該信息並返回適當大小的圖像。

這樣我就不必對我現有的圖像標籤<img src="/myniceimage.jpg" />進行任何修改，額外的信息將與請求一起發送。

不幸的是，出現這個HTTP客戶端提示功能是支持有限，見http://caniuse.com/#feat=client-hints-dpr-width-viewport

這一特徵，我可以看到（使得支撐不限於鉻），唯一的選擇是圖像移動到data-src所以瀏覽器不會自動加載它，然後使用JavaScript函數手動加載圖像，並在請求的標題中發送屏幕分辨率和像素密度。

---

有一些其他的方式來獲取發送到不要求我對我的圖片鏈接進入data-src，並有一個JavaScript函數手動加載它們的服務器的屏幕尺寸和像素密度。或者還有其他方式讓服務器使用所有瀏覽器發送的現有標題以某種方式推斷或估計該信息嗎？

謝謝！

Answer 1

這取決於你想要投資什麼。您需要以某種方式將所需的信息（呈現的圖像寬度）填充到HTTP請求中，以便瀏覽器發送回服務器。

除了Client Hints（專門用於提供此功能）或使用Javascript之外，唯一的方法是劫持srcset屬性。不過，別忘了，該解決方案爲所有，但優雅，如果你想完美的像素響應：

<img srcset=" 
    foo.1px.jpg 1w, 
    foo.2px.jpg 2w, 
    foo.3px.jpg 3w, 
    ... 
    foo.998px.jpg 998w, 
    foo.999px.jpg 999w, 
    foo.1000px.jpg 1000w 
"> 

這樣的瀏覽器請求當圖像應該是1px的寬，foo.2px.jpg爲2像素寬顯示屏等廣告無限。

如果你有一組有限的圖像尺寸，說200px，500px和任意比500px大，那麼srcset實際上確實是去了解決方案：

<img srcset=" 
    foo.large.jpg 501w, 
    foo.500px.jpg 500w, 
    foo.250px.jpg 250w 
">