“display：none”防止图像加载？ [英] Does "display:none" prevent an image from loading?

问题描述

每个响应性网站开发教程都建议使用 display：none CSS属性来隐藏移动浏览器上的内容，以便网站加载更快。是真的吗？ display：none 是否加载图片或仍在移动浏览器上加载内容？如果是这样，有没有办法在移动浏览器上加载不必要的内容？

Every responsive website development tutorial recommends using the display:none CSS property to hide content from loading on mobile browsers so the website loads faster. Is it true? Does display:none not load the images or does it still load the content on mobile browser? If so is there a way to not load the unnecessary content on mobile browsers?

推荐答案

由于脚本动态检查DOM元素的可能性，浏览器不会优化元素（或元素内容）。

Those images are loaded. The browser, due to the possibility of a script dynamically checking an element of the DOM, doesn't optimize elements (or elements content) away.

您可以检查它： http://jsfiddle.net/dk3TA/

图片有a display：none 样式，但其大小由脚本读取。
您也可以通过查看浏览器开发者工具的网络标签进行检查。

The image has a display:none style but its size is read by the script. You could also have checked it by looking at the "network" tab of your browser's developer tools.

请注意，如果浏览器是在一个小的CPU计算机，不必渲染图像（和布局页面）将使整个渲染操作更快，但我怀疑这是真正有意义的东西今天。

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

如果你想（或者将IMG src 属性设置为data：，以防止加载图像） code>或about：blank）。

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").

浏览器变得更聪明。今天，如果您的浏览器（取决于版本）可以确定它无用，可能会跳过图片加载。

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

这篇关于“display：none”防止图像加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！