使用@media query CSS，基本上我们只是发布了一个项目，我们在桌面上有一个巨大的树的图像，但没有显示在桌面/移动屏幕上。所以防止图像加载非常简单

下面是一个小片段:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

你可以使用相同的CSS来显示和隐藏显示/可见/不透明度，但图像仍在加载，这是我们想出的最安全的代码。

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

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

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

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

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

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

浏览器似乎仍然下载图像，即使他们直接或间接隐藏的display: none属性。

我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:

<img src="https://cdn.test/img.jpg" loading="lazy">

除了Safari和Firefox Android，所有最新的浏览器都支持它。

MDN img加载属性规范。

如果是这样，有没有一种方法不加载不必要的内容在手机上 浏览器吗?

使用<img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

使用display:none with images的技巧是为它们分配一个id。这是不需要很多代码使其工作。下面是一个使用媒体查询和3个样式表的示例。一个用于手机，一个用于平板电脑，一个用于台式机。我有三张图片，手机，平板电脑和台式机的图片。在手机屏幕上只会显示手机的图像，平板电脑只会显示平板电脑的图像，桌面电脑则显示桌面电脑的图像。 下面是一个代码示例，使其工作:

源代码:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

不需要媒体查询的手机CSS。是img#手机让它工作:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

平板css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

和桌面css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

祝你好运，并让我知道它是如何为你工作的。

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

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

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

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

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

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