问题描述
我不希望在移动设备上加载图像,只能在桌面上加载。
我编写以下代码:
CSS
@media屏幕和(最大宽度:480px){
div#line1 {display:none}
}
HTML
< div id =line1style =background-image:url(/background.jpg);>
< img src =/ head.jpg/>
< / div>
图片background.jpg未加载,但图片head.jpg
如果我添加
div#line1 img {display:none} // for< 480 px
相同。 Image head.jpg正在一个小分辨率的屏幕上加载。
如何防止加载head.jpg以节省带宽?
PS:我在Chrome浏览器上进行了测试
您可以看看, css在一个媒体查询中。
在html中,没有任何图像来源,那么你的css会是这样的 - 只为非移动设置来源设备:
@media(min-width:480px){
div#line1 img {
content :url(/ head.jpg);
}
}
您可能需要弄一点才能得到它工作。
另外,你应该看看链接的问题 - 关于使用这种方法的后果有很多讨论 - 以及很多情况下,当你不应该不会使用它。
I don’t want load the image on a mobil device, only on desktop.
I write the follow code:
CSS
@media only screen and (max-width: 480px) {
div#line1 {display: none}
}
HTML
<div id="line1" style=" background-image:url(/background.jpg);">
<img src="/head.jpg" />
</div>
The image background.jpg is not loaded, but the image head.jpg
If i add
div#line1 img {display: none} // for < 480 px
the same. The Image head.jpg is loading on a small resolution screen.
How can I prevent load the head.jpg to save bandwidth?
PS: i tested on Chrome browser
You could look at setting the image source in css, and put that css inside a media query.
In the html, don't have any image sources, then your css will be something like this - set the source only for non-mobile devices:
@media (min-width: 480px) {
div#line1 img {
content: url("/head.jpg");
}
}
You may have to fiddle with it a bit to get it to work.
Also, you should really take a look at the linked question - there is a lot of discussion about the consequences of using this method - and a lot of cases when you shouldn't use it.
这篇关于不加载显示图像:无的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!