一个响应式页面中有一张图片
<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表达的方法。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。