javascript - 使用 javascript document.write 的响应图像

Question

我想在我的网站上使用响应式图片，根据屏幕尺寸加载不同的分辨率，并想出了一个简单的 javascript 方法，请参见下文。

有什么理由不使用这个解决方案吗？

谢谢!

<script language="Javascript"> 
var w=window.innerWidth;

if (w<=480){
    document.write('<img src="files/design/logo_480.jpg" ');        
}else if(w<=768){
    document.write('<img src="files/design/logo_768.jpg" ');   
}else{
    document.write('<img src="files/design/logo_960.jpg" >');
}

</script>

Answer 1

遵循标准并使用 picture 或 srcset 和 sizes(取决于您的用例)。

关于浏览器支持，有两个polyfills，你可以简单的使用:

• > respimage
• > picturefill

确实没有理由使用部分自定义解决方案。

这是一个 article series .