Question

一旦页面加载，是否有可能让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>

Answer 1

您可以使用

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();
}

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

Answer 2

我发现这会强行重新渲染

var img = document.getElementById（＆＃39; my-element＆＃39;）; img.src = img.src;

是否可以重新计算在调整浏览器窗口大小时使用的`srcset`图像？

2 个答案: