不使用显示加载图像：无

Question

我不想在移动设备上加载图像，只在桌面上加载。
我编写以下代码：
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>

图片background.jpg没有加载，但是图片head.jpg
如果我添加

div#line1 img {display: none} // for < 480 px

一样。图片 head.jpg 正在小分辨率屏幕上加载。
如何防止加载 head.jpg 以节省带宽？

PS：我在 Chrome 浏览器上测试过

Answer 1

您可以查看 setting the image source in css，并将该 css 放入媒体查询中。

在 html 中，没有任何图像源，那么你的 css 将是这样的 - 只为非移动设备设置源：

@media (min-width: 480px) {
    div#line1 img { 
        content: url("/head.jpg");
    }
}

您可能需要稍微摆弄一下才能使其正常工作。

另外，您真的应该看看链接的问题 - 有很多关于使用此方法的后果的讨论 - 以及很多不应该使用它的情况。

Answer 2

如果可以选择修改标记，则只需将 <img /> 标记替换为等效的 <div> 并设置 background-image，就像使用 #line1 元素一样。

<div id="line1" style=" background-image:url(/background.jpg);">
  <div class="inner-image></div>
</div>

或者您使用<picture> 元素并使用您的max-width 条件设置适当的来源：

<picture>
  <source srcset="/head.jpg" media="(max-width: 480px)">
  <img src="/dummy-image.jpg" />
</picture>

Answer 3

您需要做的就是添加一个min-height 与您的背景图像的高度。当你隐藏一个子元素时，父元素的高度（在本例中为 div#bg）会更新为内部最高的元素，因此如果没有元素，则高度为 0（零）

@media only screen and (max-width: 480px) {
  img#head {display: none}
  div#bg {min-height: 150px;}
}

<div id="bg" style="background-image:url(http://placehold.it/350x150?text=bg); background-repeat:no-repeat;">
  <img id="head" src="http://placehold.it/350x150?text=head" />
</div>