html – img没有响应srcset指定的维度
我想使用srcset来实现响应图像,如
here所述,所以用户加载的图像src与他的分辨率最相似.
事情是我做了这个测试,它没有响应视口的变化, <img src="https://lorempixel.com/400/200/sports/" alt="" sizes="(min-width:1420px) 610px,(min-width:1320px) 500px,(min-width:1000px) 430px,(min-width:620px) 280px,280px" srcset="https://lorempixel.com/620/200/sports/ 280w,https://lorempixel.com/1000/300/animals/ 430w,https://lorempixel.com/1320/400/cats/ 610w,https://lorempixel.com/1420/500/abstract/ 1000w,https://lorempixel.com/1600/600/fashion/ 1220w" /> jsfiddle:http://jsfiddle.net/ad857m1r/9/ 任何想法我失踪了? 解决方法
首先加载srcset属性由浏览器解释,然后将加载的映像存储在缓存和
the browser could not load any other image中,直到您清除缓存并重新加载页面.
如果您希望在页面的每个resize事件上重新解释srcset,您需要更新它,但在每个URL的末尾添加一个随机变量,然后浏览器重新加载正确的一个.
var img = document.getElementById('myImage'); var srcset = img.getAttribute("srcset"); var delay; window.onresize = function() { if(!isNaN(delay)) clearTimeout(delay); delay = setTimeout(refreshImage,500); } function refreshImage() { var reg = /([^s]+)s(.+)/g; var random = Math.floor(Math.random() * 999999); img.setAttribute("srcset",srcset.replace(reg,"$1?r=" + random + " $2")); } jsfiddle (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |