一个响应式页面中有一张图片
<img src="./pic.jpg" alt=""/>
我想要这张图片在移动端(比如max-device-width: 720px)下的时候隐藏该图片,但是直接display:none
的话我发现浏览器还是会加载,对于移动端来说这应该是不能忍的了吧?
那该如何才能实现在移动端完全移除这张图片呢?
有想过
<img src="./pic.jpg" srcset="./null.jpg 1.5x, ./null.jpg 2x, ./null.jpg 3x, " alt=""/>
(null.jpg 为一张不存在的图片)
但是一想总有什么不对劲,假如是一只1倍像素比的姥爷机那不还是加载了么(应该还有很大的兼容性问题)?
这里想问下大家有没有合适的方案可以解决(使用html&css)?谢谢!
非常感谢各位和 @aikin 给的文章,其中很详细的给出了几种css下比较完美的方案,但都是将图片作为background-image
加载。还是想再求下有没有作为img
单独标签和css表达的方法。
用background-image
默认不加载,大于 720的时候再加载
或者用js在加载前把img的dom给remove掉
纯CSS的话应该不行,因为会创建dom节点,如果非要CSS,一个比较作死的办法是把图片放到:before中当背景,小屏就不需要before了,不过那样还不如直接用背景图片
Media Query & Asset Downloading Results
还是写出来一下,Media Query & Asset Downloading Results
文章里面一个比较靠谱大方法就是把图片当作一个背景图像展现,然后将元素包裹一层父元素,media query时将父元素设置display:none
贴上文章里面的代码:
<div id="test3">
<div></div>
</div>
#test3 div {
background-image:url('images/test3.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test3 {
display:none;
}
}
如果你这个必须要img标签加载的话就只能先通过dom加载完成然后js获取浏览器宽度后判断加载了。
按照你的需求还是应该从css的层面来解决。
@media (min-width: 720px){
.img{
background-image: url('...');
}
}
小于720时不加载。