每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。
其他回答
不。如果您正在考虑节省手机用户带宽，图像将像往常一样加载，并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等，而不是一个标签，因为图像标签将加载图像，无论屏幕大小和媒体查询设置。
如果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>
浏览器似乎仍然下载图像，即使他们直接或间接隐藏的display: none属性。
我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:
<img src="https://cdn.test/img.jpg" loading="lazy">
除了Safari和Firefox Android，所有最新的浏览器都支持它。
MDN img加载属性规范。
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。
使用@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来显示和隐藏显示/可见/不透明度，但图像仍在加载，这是我们想出的最安全的代码。
