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

一时失言乱红尘 2023-03-02 13:10 103阅读 0赞

本文翻译自：[Does “display:none” prevent an image from loading?][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-会阻止图像加载吗][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]* **您可以在此处进行检查： [http][http_jsfiddle.net_dk3TA] : [//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]* **[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出现一些奇怪的现象：具有背景图像并显示的元素：不会内联设置的任何内容都不会下载...但是如果不内联应用这些样式，则会出现这种情况。**

![Chrome-全部8张屏幕截图-\*图像已加载][Chrome-_8_-]

![Firefox-仅加载当前显示的1张屏幕截图\*图片][Firefox-_1]

--------------------

### \#6楼 ###

*[Quirks Mode: images and display: none][http_www.quirksmode.org_css_displayimg.html]* **[怪癖模式：图片和显示：无][http_www.quirksmode.org_css_displayimg.html]**

> *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.* **其他所有浏览器均立即下载。**

[Does _display_none_ prevent an image from loading]: https://oldbug.net/q/p0zU/Does-display-none-prevent-an-image-from-loading
[https_stackoom.com_question_p0zU_display-none-]: https://stackoom.com/question/p0zU/display-none-%E4%BC%9A%E9%98%BB%E6%AD%A2%E5%9B%BE%E5%83%8F%E5%8A%A0%E8%BD%BD%E5%90%97
[http_jsfiddle.net_dk3TA]: http://jsfiddle.net/dk3TA/
[http_www.quirksmode.org_css_displayimg.html]: http://www.quirksmode.org/css/displayimg.html
[this]: http://www.justinmarsan.com/blog/researches/hidden-elements-and-http-requests.html
[Chrome-_8_-]: https://i.stack.imgur.com/pzKgS.png
[Firefox-_1]: https://i.stack.imgur.com/ARF9g.png