sam*_*sam 13 html css responsive-design srcset
是否有可能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>
小智 6
您可以使用
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,但会消耗更多资源.