如何优化背景图像类似于 <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查询