如何防止桌面站点上的图像在移动设备上加载？
因此，我目前有一个网站，该网站根据屏幕尺寸加载两个不同的版本：一个用于桌面，一个用于移动。由于某些原因，我在网站的桌面版本上显示的图像会在移动版本上加载。
有没有办法阻止这些图像在移动设备上加载以增加性能/加载时间？我不是在谈论显示：无; 属性/在移动设备上隐藏图片，我试图阻止它们甚至将它们全部加载在一起。
如果您想看一下网站，请点击以下链接：https : //rubyredsound.com
展开
收起
1
条回答
写回答
写回答
-
如果页面加载时未激活，则可以通过CSS 阻止加载背景图像。请记住，您可以在移动设备上隐藏图片（或实际上是任何元素），并通过媒体查询开始显示它们。
.myMobileImage { background-image: url(...); }
.myDesktopImage { display: none; }
@media only screen and (min-width: 768px) { .myMobileImage { display: none; }
.myDesktopImage { display: inline-block; background-image: url(...); } } 至于个人喜好，我会牢记移动优先的方法，先声明移动样式，然后再使用Media Queries覆盖它们以获得更大的分辨率。
2019-11-28 21:45:28赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
