我们说的是图片无法在手机上加载，对不对？那么，如果您只是使用@media（最小宽度：400像素）{background-image：thing.jpg}，该怎么办？

难道不是只能在一定的屏幕宽度以上查找图像吗？

使用display：none和images的诀窍是为它们分配一个ID。当时并不需要很多代码来使其工作。这是一个使用媒体查询和3个样式表的示例。一种用于电话，一种用于平板电脑，另一种用于台式机。我有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＃phone：

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%;
    }
}

祝你好运，让我知道它如何为您服务。

使用@media查询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来显示和隐藏显示/可见性/不透明度，但是图像仍在加载中，这是我们想到的最安全的代码。

另一种可能性是使用<noscript>标签并将图像放置在<noscript>标签内。然后，noscript根据需要使用javascript删除标签。这样，您可以使用渐进增强功能按需加载图像。

使用我写的这个polyfill来读取<noscript>IE8 中标记的内容

https://github.com/jameswestgate/noscript-textcontent

否。如果您考虑节省手机用户的带宽，该图像将照常加载，并且仍将使用用户的带宽。您可以做的是使用媒体查询并筛选要加载图像的设备。图像必须设置为div等的背景图像，而不是标签，因为无论屏幕大小和媒体查询集如何，图像标签都会加载图像。

为了防止获取资源，请使用<template>Web Components的元素。

如果可以，是否有一种方法可以不在移动浏览器中加载不必要的内容？

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

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

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

怪癖模式：图片和显示：无

当图片包含display: none或位于元素中时 display:none，浏览器可能选择不下载图片，除非将display 设置为另一个值。

切换display到时，只有Opera会下载图像block。其他所有浏览器均立即下载。

是的，它的渲染速度会稍微加快一点，只是因为它不必渲染图像，而且在屏幕上排序的元素要少一些。

如果您不希望加载它，请将DIV留空，以便稍后将html包含<img>标签的HTML加载到其中。

尝试使用Firebug或Wireshark，就像我之前提到的那样，即使display:none存在，您也会看到文件确实被传输了。

如果将显示设置为无，Opera是唯一不会加载图像的浏览器。Opera现在已移至webkit，即使其显示设置为无，也将渲染所有图像。

这是一个测试页面，可以证明这一点：

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

如果将图像设为CSS中div的背景图像，则将该div设置为“ display：none”时，将不会加载该图像。禁用CSS时，它仍然不会加载，因为CSS被禁用了。

这些图像已加载。由于脚本可能会动态检查DOM元素，因此浏览器不会优化元素（或元素内容）。

您可以在此处进行检查：http : //jsfiddle.net/dk3TA/

该图像具有display:none样式，但是其大小由脚本读取。您也可以通过查看浏览器开发人员工具的“网络”标签来进行检查。

请注意，如果浏览器在小型CPU计算机上，则不必渲染图像（和布局页面）将使整个渲染操作更快，但是我怀疑这在今天是否确实有意义。

如果要防止图像加载，您可以简单地不将IMG元素添加到文档中（或将IMG src属性设置为"data:"或"about:blank"）。

编辑：

浏览器变得越来越聪明。今天，如果浏览器可以确定图像没有用，则它可能会跳过图像加载（取决于版本）。