不加载显示图像：无

问题描述

我不希望在移动设备上加载图像，只能在桌面上加载。

我编写以下代码：

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.

这篇关于不加载显示图像：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！