10

我想使用 srcset 实现响应式图像，如此处所述，因此用户加载的图像 src 与他的分辨率最相似。

问题是我做了这个测试，它没有响应视口的变化，

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle：http: //jsfiddle.net/ad857m1r/9/

知道我错过了什么吗？

4

3 回答 3

9

该srcset属性在第一次加载时由浏览器解释，然后存储加载的图像，cache并且浏览器可能不会加载任何其他图像，直到您清除cache并重新加载页面。

如果您希望在页面srcset的每个事件上重新解释resize，您需要在每个事件的末尾添加一个随机变量来更新它url，然后浏览器将为该屏幕尺寸重新加载正确的变量。

我在这个过程中添加了一个延迟，以减少它被执行的次数。您会注意到这种做法会强制浏览器在每次调整大小时下载正确的图像，这对带宽不利。我不推荐使用这种技术，让浏览器决定它在每种情况下使用哪个图像。我认为视口调整大小在日常环境中并不常见。正如@KrisD所说，使用图片元素（使用某种方法使其与旧浏览器兼容）可能对您的目的更好。

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

于 2016-01-09T13:19:27.037 回答
0

当您尝试将示例中的代码应用于您提到的链接时，您对示例中的代码进行了一些编辑：

1-当您设置 size 属性值时，您将最后一个属性值设置为 280，如示例所解释的，但之前的值直接为 580 而不是您所做的 280

2-当您使用图像的虚拟生成器之一时，您在图像链接的末尾添加了一个斜线，然后在将图像与其大小绑定之前留出空格，并且图像生成器站点已将其翻译为图像上的文本您需要将代码更改为以下内容，与您提到的示例链接中的说明相同

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />
于 2016-01-13T23:41:45.920 回答
0

您只需复制并粘贴它。首先你需要知道你必须按照递增的顺序排列图像的大小，然后你需要根据它进行调整。

例如

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

通过这个你可以查看你的结果，我刚刚试过这个和它的工作

img {
  width: 100%;  
}
<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

注释 -> 将您的图像称为image.jpg，这样会更有效。

于 2016-01-16T04:19:28.037 回答