每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容,这样网站加载得更快。这是真的吗?display:none不加载图像,还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载,如果它可以确定它是没有用的。
图像有一个显示:none样式,但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。
你可以在那里查看:http://jsfiddle.net/tnk3j08s/
您也可以通过查看浏览器开发工具的“network”选项卡来检查它。
注意,如果浏览器是在一个小的CPU计算机上,不需要渲染图像(和布局页面)将使整个渲染操作更快,但我怀疑这在今天是否真的有意义。
如果你想阻止图像加载,你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。
其他回答
浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载,如果它可以确定它是没有用的。
图像有一个显示:none样式,但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。
你可以在那里查看:http://jsfiddle.net/tnk3j08s/
您也可以通过查看浏览器开发工具的“network”选项卡来检查它。
注意,如果浏览器是在一个小的CPU计算机上,不需要渲染图像(和布局页面)将使整个渲染操作更快,但我怀疑这在今天是否真的有意义。
如果你想阻止图像加载,你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。
另一种可能是使用<noscript>标记,并将图像放在<noscript>标记中。然后使用javascript删除noscript标签,因为你需要的图像。通过这种方式,您可以使用渐进增强按需加载图像。
使用我写的这个polyfill来读取IE8中<noscript>标签的内容
https://github.com/jameswestgate/noscript-textcontent
使用display:none with images的技巧是为它们分配一个id。这是不需要很多代码使其工作。下面是一个使用媒体查询和3个样式表的示例。一个用于手机,一个用于平板电脑,一个用于台式机。我有三张图片,手机,平板电脑和台式机的图片。在手机屏幕上只会显示手机的图像,平板电脑只会显示平板电脑的图像,桌面电脑则显示桌面电脑的图像。 下面是一个代码示例,使其工作:
源代码:
<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>
不需要媒体查询的手机CSS。是img#手机让它工作:
img#phone {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}
img#tablet {display: none;}
img#desktop {display: none;}
平板css:
@media only screen and (min-width: 641px) {
img#phone {display: none;}
img#tablet {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}
}
和桌面css:
@media only screen and (min-width: 1141px) {
img#tablet {display: none;}
img#desktop {
display: block;
margin: 6em auto 0 auto;
width: 80%;
}
}
祝你好运,并让我知道它是如何为你工作的。
答案不像简单的是或不是那么简单。看看我最近做的一个测试的结果:
在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.
是的,它会渲染得更快一点,只是因为它不需要渲染图像,并且在屏幕上少了一个元素来排序。
如果您不想加载它,请将DIV保留为空,以便稍后加载包含<img>标记的html。
尝试使用firebug或wireshark,就像我之前提到的那样,你会看到即使display:none存在,文件也会被传输。
Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit,即使它们的显示设置为none,也会渲染所有图像。
这里有一个测试页面可以证明这一点:
http://www.quirksmode.org/css/displayimg.html