如何在移动视图中停止请求图像标题答案

【问题标题】：How to stop an image header from being requested when in mobile view如何在移动视图中停止请求图像标题
【发布时间】：2017-07-26 22:20:43
【问题描述】：

所以我使用媒体查询将图像设置为display:none。

@media only screen and (max-width:530px) {

    img  {
        display: none;
    }

}

我还尝试将图像/s 放在父 div 中，然后将该显示设置为无。那也没用。

<div id="right">
    <img src="images/meeting.jpg" />
</div>

但如果您查看 Chrome 开发工具，您会发现它仍然请求它。

Image

我如何才能禁止请求图像，但仅限于在移动视图或特定宽度（使用媒体查询）中

【问题讨论】：

将图像包裹在一个div中并为该div设置display:none
我已经尝试过包装一个 div 并将该 div 显示设置为无。但它仍然请求该图像。
你能把相关的HTML贴在这里吗？
我已经编辑了我的帖子以包含标记
Not loading a image with display:none的可能重复

标签： google-chrome-devtools

【解决方案1】：

当你运行下面的 sn -p 并使用开发者工具检查时，你会看到下载了 100 和 200。但 300 不是。

.hide {
  display: none;
}

/* demo with placehold images */

/* this image is downloaded */
<img src="http://placehold.it/100">

/* this image is downloaded */
<img class="hide" src="http://placehold.it/200">

/* this image is NOT downloaded */
<div class="hide">
  <img src="http://placehold.it/300">
</div>

【讨论】：

如果您检查网络选项卡，您会看到它发送了两个图像的请求并下载了它们，但它没有显示它们。我的问题是如何禁止它发送对特定图像的请求。
显然这不适用于所有浏览器:(

【解决方案2】：

您还可以将所有 css 移动到媒体查询：

	@media only screen and (min-width:530px) {
		
		#right>img {
			display:block;
			content: url("https://i.stack.imgur.com/5Sdkx.png");
		}

	}
	@media only screen and (max-width:530px) {

		#right>img {
			content: '';
		}

	}

<!doctype html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<div id="right">
		<img src="" />
	</div>
</body>
</html>

编辑

请看这个link

【讨论】：

即使我这样做，它仍然会发送一个 GET 请求来获取图像，因为它在 HTML 文件中。我需要的是它不发送 GET 请求，只有在移动视图中。
这不是我想要的。你要么不理解我的问题，要么不知道如何解决。还是谢谢。
你的问题的最后两行，在你的图片链接下面，是你要找的，对吧！？打开我的答案中的链接，按 F12，将屏幕（您会看到屏幕顶部出现的分辨率）缩放到小于 530 像素，检查网络选项卡并按 F5，您会看到图像不是加载（到小于 530 像素的屏幕），我猜，这就是你要找的。之后，将您的屏幕缩放到 530 像素以上并按 F5，检查网络选项卡并查看图像是否已加载...如果您看到与它不同的任何内容，请告诉我