每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容，这样网站加载得更快。这是真的吗?display:none不加载图像，还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
如果是这样，有没有一种方法不加载不必要的内容在手机上 浏览器吗?
使用<img src="" srcset="">
http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/
https://caniuse.com/#feat=srcset
其他回答
我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}
那么，它难道不会只寻找超过一定屏幕宽度的图像吗?
是的，它会渲染得更快一点，只是因为它不需要渲染图像，并且在屏幕上少了一个元素来排序。
如果您不想加载它，请将DIV保留为空，以便稍后加载包含<img>标记的html。
尝试使用firebug或wireshark，就像我之前提到的那样，你会看到即使display:none存在，文件也会被传输。
Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit，即使它们的显示设置为none，也会渲染所有图像。
这里有一个测试页面可以证明这一点:
http://www.quirksmode.org/css/displayimg.html
如果是这样，有没有一种方法不加载不必要的内容在手机上 浏览器吗?
使用<img src="" srcset="">
http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/
https://caniuse.com/#feat=srcset
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。
** 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
