每个响应式网站开发教程都建议使用display:noneCSS属性来隐藏内容，以防止内容在移动浏览器中加载，从而使网站加载速度更快。是真的吗 难道display:none不加载图像或它仍然加载在手机浏览器的内容？有什么方法可以防止在移动浏览器上加载不必要的内容？
“ display：none”会阻止图像加载吗？
使用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 中标记的内容
否。如果您考虑节省手机用户的带宽，该图像将照常加载，并且仍将使用用户的带宽。您可以做的是使用媒体查询并筛选要加载图像的设备。图像必须设置为div等的背景图像，而不是标签，因为无论屏幕大小和媒体查询集如何，图像标签都会加载图像。
为了防止获取资源，请使用<template>Web Components的元素。
如果可以，是否有一种方法可以不在移动浏览器中加载不必要的内容？
采用 <img src="" srcset="">
http://www.webdesignerdepot.com/2015/08/the-state-of-sensitive-images/
当图片包含
display: none或位于元素中时display:none，浏览器可能选择不下载图片，除非将display设置为另一个值。切换
display到时，只有Opera会下载图像block。其他所有浏览器均立即下载。
是的，它的渲染速度会稍微加快一点，只是因为它不必渲染图像，而且在屏幕上排序的元素要少一些。
如果您不希望加载它，请将DIV留空，以便稍后将html包含<img>标签的HTML加载到其中。
尝试使用Firebug或Wireshark，就像我之前提到的那样，即使display:none存在，您也会看到文件确实被传输了。
如果将显示设置为无，Opera是唯一不会加载图像的浏览器。Opera现在已移至webkit，即使其显示设置为无，也将渲染所有图像。
这是一个测试页面，可以证明这一点：
如果将图像设为CSS中div的背景图像，则将该div设置为“ display：none”时，将不会加载该图像。禁用CSS时，它仍然不会加载，因为CSS被禁用了。
这些图像已加载。由于脚本可能会动态检查DOM元素，因此浏览器不会优化元素（或元素内容）。
您可以在此处进行检查：http : //jsfiddle.net/dk3TA/
该图像具有display:none样式，但是其大小由脚本读取。您也可以通过查看浏览器开发人员工具的“网络”标签来进行检查。
请注意，如果浏览器在小型CPU计算机上，则不必渲染图像（和布局页面）将使整个渲染操作更快，但是我怀疑这在今天是否确实有意义。
如果要防止图像加载，您可以简单地不将IMG元素添加到文档中（或将IMG src属性设置为"data:"或"about:blank"）。
编辑：
浏览器变得越来越聪明。今天，如果浏览器可以确定图像没有用，则它可能会跳过图像加载（取决于版本）。
我们说的是图片无法在手机上加载，对不对？那么，如果您只是使用@media（最小宽度：400像素）{background-image：thing.jpg}，该怎么办？
难道不是只能在一定的屏幕宽度以上查找图像吗？