如果你让图片成为CSS中一个div的背景图片，当这个div被设置为“display: none”时，图片将不会被加载。当CSS被禁用时，它仍然不能加载，因为CSS是禁用的。

浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载，如果它可以确定它是没有用的。

图像有一个显示:none样式，但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。

你可以在那里查看:http://jsfiddle.net/tnk3j08s/

您也可以通过查看浏览器开发工具的“network”选项卡来检查它。

注意，如果浏览器是在一个小的CPU计算机上，不需要渲染图像(和布局页面)将使整个渲染操作更快，但我怀疑这在今天是否真的有意义。

如果你想阻止图像加载，你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。

是的，它会渲染得更快一点，只是因为它不需要渲染图像，并且在屏幕上少了一个元素来排序。

如果您不想加载它，请将DIV保留为空，以便稍后加载包含<img>标记的html。

尝试使用firebug或wireshark，就像我之前提到的那样，你会看到即使display:none存在，文件也会被传输。

Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit，即使它们的显示设置为none，也会渲染所有图像。

这里有一个测试页面可以证明这一点:

http://www.quirksmode.org/css/displayimg.html

如果你让图片成为CSS中一个div的背景图片，当这个div被设置为“display: none”时，图片将不会被加载。当CSS被禁用时，它仍然不能加载，因为CSS是禁用的。

嗨，伙计们，我也在与同样的问题作斗争，如何不在移动设备上加载图像。

但我想到了一个好办法。首先创建一个img标签，然后在src属性中加载一个空白的svg。现在，您可以将图像的URL设置为内联样式的content: URL('链接到您的图像');。现在用你选择的包装包装你的img标签。

<div class="test">
  <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>

  @media only screen and (max-width: 800px) {
      .test{
       display: none;
      }
    }

将包装器设置为在不希望加载图像的断点上不显示任何内容。img标记的内联css现在被忽略，因为包装器中没有显示的元素的样式将被忽略，因此图像不会被加载，直到到达包装器有显示块的断点。

好了，在移动断点上不加载img的简单方法:)

查看这个代码依赖，以获得一个工作示例:http://codepen.io/fennefoss/pen/jmXjvo

如果div设置为“display:none”，则会加载div元素的背景图像。

不管怎样，如果同一个div有一个父元素，并且父元素被设置为'display:none'，子元素的背景图像将不会加载。：）

使用bootstrap的示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="col-xs-12 visible-lg"> <div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div> </div> <div class="col-xs-12 visible-md"> <div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div> </div> <div class="col-xs-12 visible-sm"> <div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div> </div> <div class="col-xs-12 visible-xs"> <div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div> </div>