如果调整浏览器 window 的大小，是否可以重新计算使用的 `srcset` 图像？

Question

是否可以让 srcset 在页面加载后重新计算浏览器 window 大小，从而更新其使用的图像。

您想要这样做的原因是因为如果在桌面上您的浏览器 window 被压缩，加载一个网站，然后使浏览器 window 更大，它只会缩放"small.jpg"（如 srcset 中的设置），因此用户最终会得到一个像素化图像。

我开始制作一个 jsfiddle 来展示这个问题，但它并不能很好地工作，因为我认为 srcset 是由浏览器计算的 window，而不是 jsfiddle 结果网格。

如果您有兴趣，可以将其复制并粘贴到空白 html 文件中，然后运行将其保存在本地服务器中（必须位于本地 http:// 服务器上，以便您可以查看网络调试选项卡以查看浏览器加载了哪个图像）。运行它在浏览器中通过文件 url 使用 file:/// 不允许您通过网络调试选项卡查看加载了哪个图像。

    <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>

Answer 1

您可以使用

var img = document.getElementById('resizeMe');

window.onresize = function() {
    img.outerHTML = img.outerHTML;
}

这将导致HTML再次通过解析器发送，导致浏览器根据srcset重新加载图像。

当然，您可能应该包含一些逻辑来检测屏幕尺寸是否已更改为当前范围之外的尺寸，这样每次用户稍微调整 window 大小时图像都不会重新加载。

或者，您可以克隆节点，将其插入到当前节点之前，然后删除旧节点。

var img = document.getElementById('resizeMe');

window.onresize = function() {
    var clone = img.cloneNode(true);
    img.parentNode.insertBefore(clone, img);
    img.remove();
}

这也会导致解析重新呈现 html，但会消耗更多资源。

Answer 2

我发现这是为了强制重新渲染

var img = document.getElementById('my-element');

img.srcset = img.srcset;

如果调整浏览器 window 的大小，是否可以重新计算使用的 `srcset` 图像？

Is it possible to recalculate the `srcset` image used if browser window is resized?

html

css

responsive-design

srcset