当前位置: 首页 > 面试题库 >

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

魏硕
2023-03-14
问题内容

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


问题答案:

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

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

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

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

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



 类似资料:
  • 问题内容: 有没有办法用javascript / jquery防止图像加载?我正在从带有图像的html列表构建幻灯片。因此,我想收集所有src数据,然后阻止加载图像。因此,稍后当用户真正需要图像时,我便会加载它。 我在Google上找到了一些延迟加载脚本,但找不到阻止图像加载的方式。 提前致谢。 Edit1: 从答案看来,不可能使用javascript来防止图像加载。 这是一个执行延迟加载的脚本。

  • 问题内容: 我正在构建一个小型React应用,并且我的本地图像无法加载。图像像负载。我以为这可能与服务器有关? 这是我的App.js index.js: 和server.js: 问题答案: 使用Webpack时,您需要对图像进行处理,以便Webpack处理它们,这可以解释为什么外部图像不加载而内部图像加载的原因,因此,您无需为每个图像使用正确的图像名称替换image-name.png。这样,Web

  • 我建立简单的画廊。我使用Glide加载我的照片。在glide加载的图像上,看起来像是某种条纹(像素似乎是可见的)。我试图加载格式已更改的照片,我使用了,但它看起来仍然比原始照片更糟糕。 我用来加载的代码:

  • 问题内容: 我有下一个代码: par.go 我用next运行它: 然后,确认此过程中有多少个线程: 您可以看到有5个线程。 如果我更改in代码的值,那么接下来的情况是: 我知道,去调度的后续机型,在这里,所以,是有(内核线程)。如果任何goroutine处于任何阻塞状态,则它们将从current脱离,并找到一个空闲的或新的if(如果找不到)。 所以,我的问题是:真的在阻止goroutine吗?如果

  • 本文向大家介绍Android 加载图像,包括了Android 加载图像的使用技巧和注意事项,需要的朋友参考一下 示例 影像检视 要将图像从指定的URL,Uri,资源ID或任何其他模型加载到ImageView: 对于Uris,请替换yourUrl为您的Uri(content://media/external/images/1)。对于可绘制对象,请替换yourUrl为您的资源ID(R.drawable

  • 本文向大家介绍css加载会阻塞js运行吗?相关面试题,主要包含被问及css加载会阻塞js运行吗?时的应答技巧和注意事项,需要的朋友参考一下 参考文章