"display:none“会阻止图片加载吗？
每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器上加载的内容，这样网站加载速度就会更快。是真的吗？display:none是不加载图片，还是仍然在移动浏览器上加载内容？有没有办法防止在移动浏览器上加载不必要的内容？
回答 11
Stack Overflow用户
发布于 2012-08-28 19:50:35
浏览器变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载，如果它确定它没有用的话。
图像具有display:none样式，但其大小可由脚本读取。如果父对象处于隐藏状态，则Chrome v68.0不会加载图像。
你可以在那里查看：http://jsfiddle.net/tnk3j08s/
您也可以通过查看浏览器开发人员工具的“网络”选项卡来检查它。
请注意，如果浏览器是在一台小型CPU计算机上，则不必渲染图像(和布局页面)将使整个渲染操作更快，但我怀疑这在今天是否真的有意义。
如果希望阻止图像加载，可以不将IMG元素添加到文档中(或者将IMG src属性设置为"data:"或"about:blank")。
Stack Overflow用户
发布于 2013-03-12 03:01:47
如果在CSS中将图像设置为div的背景图像，则当该div设置为"display: none“时，图像将不会加载。当禁用CSS时，它仍然不会加载，因为CSS是禁用的。
Stack Overflow用户
发布于 2016-01-07 04:46:40
只是在扩展布伦特的解决方案。
对于纯CSS解决方案，您可以执行以下操作，它还可以使img框在响应式设计设置中的实际行为类似于img框(这就是透明png的用途)，如果您的设计使用响应式动态调整图像大小，这一点尤其有用。
<img style="display: none; height: auto; width:100%; background-image:
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">只有当绑定到visible-lg-block的媒体查询被触发并且display:none更改为display:block时，才会加载图像。透明的png用于允许浏览器在流畅设计(高度:自动；宽度: 100%)中为您的块(以及背景图像)设置适当的高度:宽度比。
1078/501 = ~2.15 (large screen)
400/186 = ~2.15 (small screen)因此，对于3个不同的视口，您最终得到的结果如下所示：
<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">在初始加载期间，仅加载默认媒体视口大小的图像，然后，根据您的视口，图像将动态加载。
没有javascript！
https://stackoverflow.com/questions/12158540
复制相似问题
腾讯云开发者
