是否“显示:无"阻止图像加载? [英] 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? Is there any way to prevent loading unnecessary content on mobile browsers?

推荐答案

浏览器变得越来越智能.今天您的浏览器(取决于版本)可能会跳过图像加载，如果它可以确定它没有用.

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 样式，但脚本可以读取其大小.如果父隐藏，Chrome v68.0 不会加载图像.

The image has a display:none style but its size may be read by the script. Chrome v68.0 does not load images if the parent is hidden.

您可以在那里查看:http://jsfiddle.net/tnk3j08s/

您也可以通过查看浏览器开发者工具的网络"选项卡来检查它.

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 元素添加到您的文档中(或将 IMG src 属性设置为 "data:" 或"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").

这篇关于是否“显示:无"阻止图像加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！