您的位置: 首页  >  文章  >  “ display：none”会阻止图像加载吗？

“ display：none”会阻止图像加载吗？

分类: 文章 • 2025-02-28 23:14:47

本文翻译自：Does “display:none” prevent an image from loading?

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. 每个响应式网站开发教程都建议使用display:none CSS属性来隐藏内容，以免在移动浏览器中加载内容，从而使网站加载速度更快。 Is it true? 是真的吗 Does display:none not load the images or does it still load the content on mobile browser? display:none是否不会加载图像或仍将其内容加载到移动浏览器中？ Is there any way to prevent loading unnecessary content on mobile browsers? 有什么方法可以防止在移动浏览器上加载不必要的内容？

#1楼

参考：https://stackoom.com/question/p0zU/display-none-会阻止图像加载吗

#2楼

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. 由于脚本可能会动态检查DOM元素，因此浏览器不会优化元素（或元素内容）。

You may check it there : http://jsfiddle.net/dk3TA/ 您可以在此处进行检查： http : //jsfiddle.net/dk3TA/

The image has a display:none style but its size is read by the script. 该图像具有display:none样式，但是其大小由脚本读取。 You could also have checked it by looking at the "network" tab of your browser's developer tools. 您也可以通过查看浏览器开发人员工具的“网络”标签来进行检查。

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. 请注意，如果浏览器在小型CPU计算机上，则不必渲染图像（和布局页面）将使整个渲染操作更快，但是我怀疑这在今天是否确实有意义。

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" ). 如果要防止图像加载，可以简单地不将IMG元素添加到文档中（或将IMG src属性设置为"data:"或"about:blank" ）。

EDIT : 编辑：

Browsers are getting smarter. 浏览器变得越来越聪明。 Today your browser (depending on the version) might skip the image loading if it can determine it's not useful. 今天，如果浏览器（取决于版本）可以确定图像没有用，则可能会跳过图像加载。

#3楼

Yes it will render faster, slightly, only because it doesn't have to render the image and is one less element to sort on the screen. 是的，它的渲染速度会稍微加快一点，只是因为它不必渲染图像，而且在屏幕上排序的元素要少一些。

If you don't want it loaded, leave a DIV empty where you can load html into it later containing an <img> tag. 如果您不希望加载它，请将DIV留空，以便以后可以将html包含<img>标记的HTML加载到其中。

Try using firebug or wireshark as I've mentioned before and you'll see that the files DO get transferred even if display:none is present. 如前所述，尝试使用Firebug或Wireshark，即使display:none出现，您也会看到文件确实被传输了。

Opera is the only browser which will not load the image if the display is set to none. 如果显示设置为无，Opera是唯一不会加载图像的浏览器。 Opera has now moved to webkit and will render all images even if their display is set to none. Opera现在已移至webkit，即使其显示设置为无，也将渲染所有图像。

Here is a testing page that will prove it: 这是一个测试页面，可以证明这一点：

http://www.quirksmode.org/css/displayimg.html http://www.quirksmode.org/css/displayimg.html

#4楼

If you make the image a background-image of a div in CSS, when that div is set to "display: none", the image will not load. 如果将图像设为CSS中div的背景图像，则当该div设置为“ display：none”时，将不会加载该图像。 When CSS is disabled, it still will not load, because, well, CSS is disabled. 禁用CSS时，它仍然不会加载，因为CSS已禁用。

#5楼

The answer is not as easy as a simple yes or no. 答案并不像简单的是或否那样容易。 Check out the results of a test I recently did: 查看我最近做的测试结果：

  • In Chrome: All 8 screenshot-* images loaded (img 1) 在Chrome中：加载所有8张屏幕截图-*图像（img 1）
  • In Firefox: Only the 1 screenshot-* image loaded that is currently being displayed (img 2) 在Firefox中：仅加载当前显示的1张屏幕截图*图片（img 2）

So after digging further I found this , which explains how each browser handles loading img assets based on css display: none; 因此，在进一步研究之后，我发现了this ，它解释了每种浏览器如何基于css display处理加载img资产。

Excerpt from the blog post: 博客文章摘录：

  • Chrome and Safari (WebKit): Chrome和Safari（WebKit）：
    WebKit downloads the file every time except when a background is applied through a non-matching media-query. WebKit每次都会下载文件，除非通过不匹配的媒体查询应用了背景。
  • Firefox: 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. 如果样式被隐藏，Firefox将不会下载带有背景图像的图像，但是它们仍将从img标签下载资源。
  • Opera: 歌剧：
    Like Firefox does, Opera won't load useless background-images. 像Firefox一样，Opera不会加载无用的背景图像。
  • Internet Explorer: IE浏览器：
    IE, like WebKit will download background-images even if they have display: none; IE和WebKit一样，即使显示，也将下载背景图像。 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. IE6出现一些奇怪的现象：具有背景图像并显示的元素：不会内联设置的任何内容都不会下载...但是如果不内联应用这些样式，则会出现这种情况。

“ display：none”会阻止图像加载吗？

“ display：none”会阻止图像加载吗？

#6楼

Quirks Mode: images and display: none 怪癖模式：图片和显示：无

When image has display: none or is inside an element with display:none , the browser may opt not to download the image until the display is set to another value. 当图像display: none或位于display:none元素为display:none的元素内时，浏览器可能选择不下载图像，除非将display设置为另一个值。

Only Opera downloads the image when you switch the display to block . 将display切换为block时，只有Opera会下载图像。 All other browsers download it immediately. 其他所有浏览器均立即下载。

相关推荐