是否可以让 srcset 在页面加载后重新计算浏览器窗口大小，从而更新其使用的图像。
你想要这样做的原因是因为如果在桌面上你有你的浏览器窗口压缩，加载一个网站，然后使浏览器窗口变大，它只会缩放“small.jpg”(如设置srcset) 这样用户最终会得到一个像素化的图像。
我开始制作一个 jsfiddle 来显示这个问题，但它并没有很好地工作，因为我认为 srcset 是由浏览器窗口计算的，而不是 jsfiddle 结果网格。
如果你有兴趣可以在下面复制并粘贴到一个空白的 html 文件中并在本地服务器中运行它(必须在本地 http://服务器上以便你可以查看网络调试选项卡以查看浏览器加载了哪个图像)。使用 file:/// 通过文件 url 在浏览器中运行它不会让您看到通过网络调试选项卡加载了哪个图像。
<body>
<div class="wrapper">
<img
src="http://i.imgur.com/DoWeH0X.jpg?1"
srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w"
alt="#"
>
</body>
</html>
最佳答案
你可以使用
var img = document.getElementById('resizeMe');
window.onresize = function() {
img.outerHTML = img.outerHTML;
}
这将导致HTML再次通过解析器发送，导致浏览器根据srcset重新加载图像。
当然，您可能应该包含一些逻辑来检测屏幕尺寸是否已更改为当前范围之外的尺寸，这样每次用户稍微调整窗口大小时图像都不会重新加载。
或者，您可以克隆节点，将其插入到当前节点之前，然后删除旧节点。
var img = document.getElementById('resizeMe');
window.onresize = function() {
var clone = img.cloneNode(true);
img.parentNode.insertBefore(clone, img);
img.remove();
}
这也会导致parse重新渲染html，但是会消耗更多的资源。
关于html - 如果调整浏览器窗口的大小，是否可以重新计算使用的 `srcset` 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30899271/