14

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

你想这样做的原因是因为如果在桌面上你压缩了浏览器窗口，加载一个站点，然后使浏览器窗口变大，它只会缩放“small.jpg”（如 中所设置srcset）所以用户最终会得到一个像素化的图像。

我开始制作一个 jsfiddle 来显示这个问题，但它并不能很好地工作，因为我认为srcset是由浏览器窗口计算的，而不是 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>
4

2 回答 2

7

您可以使用

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，但会消耗更多资源。

于 2015-06-17T18:30:16.730 回答
2

我发现这会强制重新渲染

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

img.srcset = img.srcset;

于 2017-12-06T21:00:13.880 回答