每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
为了防止获取资源，使用Web Components的<template>元素。
其他回答
不。如果您正在考虑节省手机用户带宽，图像将像往常一样加载，并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个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>
答案不像简单的是或不是那么简单。看看我最近做的一个测试的结果:
在Chrome浏览器:所有8个截图-*图像加载(img 1) 在Firefox中:仅加载当前正在显示的1个截图*图像(img 2)
所以在深入挖掘之后，我发现了这个，这解释了每个浏览器如何处理加载基于css显示的img资产:none;
摘自博客文章:
Chrome and Safari (WebKit): WebKit downloads the file every time except when a background is applied through a non-matching media-query. Firefox: Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags. Opera: Like Firefox does, Opera won't load useless background-images. Internet Explorer: IE, like WebKit will download background-images even if they have display: none; Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.
** 2019回答**
在正常情况下显示:none不阻止图像被下载
/*will be downloaded*/
#element1 {
display: none;
background-image: url('https://picsum.photos/id/237/100');
}
但是如果一个祖先元素有display:none，那么后代的图像将不会被下载
/* Markup */
<div id="father">
<div id="son"></div>
</div>
/* Styles */
#father {
display: none;
}
/* #son will not be downloaded because the #father div has display:none; */
#son {
background-image: url('https://picsum.photos/id/234/500');
}
其他阻止下载映像的情况:
1-目标元素不存在
/* never will be downloaded because the target element doesn't exist */
#element-dont-exist {
background-image: url('https://picsum.photos/id/240/400');
}
2-两个相等的类加载不同的图像
/* The first image of #element2 will never be downloaded because the other #element2 class */
#element2 {
background-image: url('https://picsum.photos/id/238/200');
}
/* The second image of #element2 will be downloaded */
#element2 {
background-image: url('https://picsum.photos/id/239/300');
}
你可以在这里观看:https://codepen.io/juanmamenendez15/pen/dLQPmX
是的，它会渲染得更快一点，只是因为它不需要渲染图像，并且在屏幕上少了一个元素来排序。
如果您不想加载它，请将DIV保留为空，以便稍后加载包含<img>标记的html。
尝试使用firebug或wireshark，就像我之前提到的那样，你会看到即使display:none存在，文件也会被传输。
Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit，即使它们的显示设置为none，也会渲染所有图像。
这里有一个测试页面可以证明这一点:
http://www.quirksmode.org/css/displayimg.html
