如何在移动视图中停止请求图片标题

因此，我使用媒体查询将图片设置为display:none。如何在移动视图中停止请求图片标题

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

    img { 
     display: none; 
    } 

}

我也试过把image/s放在父div中，然后将该显示设置为none。那也行不通。

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

但是，如果您查看Chrome开发工具，您可以看到它仍然会请求它。

Image

如何从被要求禁用图像，但只有在移动视图或特定的宽度时，当您运行下面的代码片段，并与开发者工具检查（使用媒体查询）

来源

2017-07-26 fwzmhmd

将图像包装在div中并设置显示：无为div – Gerard

我已尝试在div中包装并将div显示设置为none。但它仍然要求该图像。 – fwzmhmd

你可以在这里发布相关的HTML吗？ – Gerard

，你将看到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>

来源

2017-07-26 11:24:08 Gerard

如果您检查网络选项卡，您会看到它发送了两个图像的请求并下载它们，但没有显示它们。我的问题是如何禁止它发送特定图像的请求。 – fwzmhmd

显然这并不适用于所有的浏览器:( – Gerard

你也可以将所有的CSS媒体查询：

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

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

 
\t \t #right>img { 
 
\t \t \t content: ''; 
 
\t \t } 
 

 
\t }

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

编辑

请参阅此link

来源

2017-07-26 11:40:39 IonS

即使我这样做，它仍然会发送GET请求来获取图像，因为它在HTML文件中。我需要的是不发送GET请求，只有在移动视图中 – fwzmhmd

好的，请检查我的答案，我已经更新了 – IonS

这不是我正在寻找的东西，你要么不理解我的问题，要么不知道如何解决。。 – fwzmhmd

如何在移动视图中停止请求图片标题

回答

相关问题