一尘不染

“ display:none”会阻止图像加载吗?

css

每个响应式网站开发教程都建议使用display:noneCSS属性来隐藏内容,以防止内容在移动浏览器中加载,从而使网站加载速度更快。是真的吗
难道display:none不加载图像或它仍然加载在手机浏览器的内容?有什么方法可以防止在移动浏览器上加载不必要的内容?


阅读 469

收藏
2020-05-16

共1个答案

一尘不染

浏览器变得越来越聪明。今天,如果浏览器(取决于版本)可以确定图像没有用,则可能会跳过图像加载。

该图像具有display:none样式,但是脚本可以读取其大小。如果父级为隐藏状态,Chrome v68.0不会加载图像。

您也可以通过查看浏览器开发人员工具的“网络”标签来进行检查。

请注意,如果浏览器在小型CPU计算机上,则不必渲染图像(和布局页面)将使整个渲染操作更快,但是我怀疑这在今天是否确实有意义。

如果您想防止图像加载,可以简单地不将IMG元素添加到文档中(或将IMGsrc属性设置为"data:""about:blank")。

2020-05-16