每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容,这样网站加载得更快。这是真的吗?display:none不加载图像,还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
如果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>
其他回答
是的,它会渲染得更快一点,只是因为它不需要渲染图像,并且在屏幕上少了一个元素来排序。
如果您不想加载它,请将DIV保留为空,以便稍后加载包含<img>标记的html。
尝试使用firebug或wireshark,就像我之前提到的那样,你会看到即使display:none存在,文件也会被传输。
Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit,即使它们的显示设置为none,也会渲染所有图像。
这里有一个测试页面可以证明这一点:
http://www.quirksmode.org/css/displayimg.html
浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载,如果它可以确定它是没有用的。
图像有一个显示:none样式,但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。
你可以在那里查看:http://jsfiddle.net/tnk3j08s/
您也可以通过查看浏览器开发工具的“network”选项卡来检查它。
注意,如果浏览器是在一个小的CPU计算机上,不需要渲染图像(和布局页面)将使整个渲染操作更快,但我怀疑这在今天是否真的有意义。
如果你想阻止图像加载,你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。
如果你让图片成为CSS中一个div的背景图片,当这个div被设置为'display: none'时,图片将不会被加载。
只是在扩展布伦特的解决方案。
对于纯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用于允许浏览器在流体设计中为<img>块(因此是背景图像)设置适当的高宽比(height: auto;宽度: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!
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none,浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时,只有Opera才能下载图像。 所有其他浏览器立即下载它。
浏览器似乎仍然下载图像,即使他们直接或间接隐藏的display: none属性。
我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:
<img src="https://cdn.test/img.jpg" loading="lazy">
除了Safari和Firefox Android,所有最新的浏览器都支持它。
MDN img加载属性规范。