如何優化背景圖像類似於 <picture> 標簽？

Question

我建立了一個網站，下載速度極其重要，尤其是對於移動設備。 如何像使用標簽一樣優化圖像的加載，但是如何針對'style'屬性中的background-image？

Answer 1

您可以使用javascript。

使用Java腳本獲取屏幕的寬度/高度，將其放入變量中，然后執行if語句，然后設置元素的樣式。

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

if(width>700){
document.getElementById("id").style.background="url('image.png')";
}

u根據需要添加任意多的if語句，類似於@meda查詢