具有javascript document.write的响应图像

Responsive images with javascript document.write

本文关键字：响应 图像 write javascript document 具有      更新时间：2023-09-26

我想在我的网站上使用响应图像，根据屏幕大小加载不同的分辨率，并提出了一种简单的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>

使用标准并将picture或srcset与sizes一起使用（取决于您的用例）。

关于浏览器支持，有两种polyfill，您可以简单地使用：

  • 重新映像
  • 图片填充

使用部分自定义解决方案确实没有任何借口。

这是一个系列文章。

您可以使用浏览器内置的图片元素。请参见此处：http://googlechrome.github.io/samples/picture-element/

关于htmlrocks 的更多信息

看看这里为什么不应该使用document.writehttps://stackoverflow.com/a/802943/2767886

你不应该使用这个JS，因为：

  • 您必须添加一个调整大小事件（如果窗口宽度发生变化，则需要更新徽标大小）
  • 在调整新徽标的大小时，url->将是一个新的加载请求
  • 是document.write
  • 关闭javascript的人看不到徽标

纯CSS解决方案会更容易：

@media screen and (max-width: 480px) {
    .logo {
        background-image: url(files/design/logo_480.jpg);
        width: 480px; height: 75px;
    }
}
@media screen and (max-width: 768px) {
    .logo {
        background-image: url(files/design/logo_768.jpg);
        width: 768px; height: 100px;
    }
}
@media screen and (min-width: 768px) {
    .logo {
        background-image: url(files/design/logo_960.jpg);
        width: 960px; height: 150px;
    }
}

我不知道你的浏览器支持规范，但有HTML5方法：<picture>元素。但它支持的浏览器很少——http://caniuse.com/#feat=picture

更新

另一种方法是使用CSS和@media规则。但在这里，您将处理背景图像，而不是可能不符合语义的<img>元素（何时使用IMG与CSS背景图像？）：

@media screen and (max-width: 480px) {
    div.my-image {
        background-image: url(files/design/logo_480.jpg);
    }
}
@media screen and (max-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_768.jpg);
    }
}
@media screen and (min-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_960.jpg);
    }
}

浏览器支持-IE9+、Chrome 21+、FF 3.5+(http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

更新#2

另一种方法-您可以简单地更改现有<img>的src，而不是write内容。

var w=window.innerWidth;
var img = document.getElementById("logo");
if (w<=480){
    img.src = "files/design/logo_480.jpg"
}else if(w<=768){
    img.src = "files/design/logo_768.jpg"
}else{
    img.src = "files/design/logo_960.jpg"
}
相关文章：