如果元素是display:none;在媒体查询中他们仍然加载? [英] If an element is display: none; in a media query are they loaded in still?

查看:135
本文介绍了如果元素是display:none;在媒体查询中他们仍然加载?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

今天只是想着这件事,这让我很好奇。

Was just thinking about this today and it made me curious.

如果我在网站上有一些元素或div,例如视频标记,如果我将此视频标记设置为display:none;在移动用户的媒体查询中。

If I have some elements or divs on a site, such as a video tag, if I set this video tag to display: none; in a media query for mobile users.

当这些用户在他们的设备上查看该网站时,该网站是否仍会加载视频及其元素,然后隐藏它们?或者它是否阻止元素被加载?

When those users view the site on their devices, will the site still load in the video and its elements, then hide them? Or does it prevent the elements from being loaded in?

会影响加载时间吗?

我有一个用于桌面的html5视频网站,当缩小时,它会用移动设备的gif替换这些元素,因为html5无法在ios设备上自动播放。这是否意味着选择display none会阻止视频或其他任何元素影响移动加载时间?

I have a site with html5 video for desktop and when scaled down it replaces these elements with a gif for mobile devices since html5 cant auto play on ios devices. Does that mean by selecting display none it is preventing the videos or whatever other elements from affecting the mobile load time?

推荐答案

这是情况和浏览器相关。在许多情况下,隐藏的资产不会被下载,但可能是浏览器认为它将被使用。这是一个较旧的问题,但它解决了你的问题:

This is situation and browser dependent. In many cases a hidden asset won't be downloaded but it could be if the browser thinks its going to be used. This is an older question but it addresses what you are after:

是否" display:none"阻止图像加载?

我猜想在移动设备上会延迟下载。我肯定知道显示:无; android上的当前chrome上的图像延迟,html5视频可能是相同的。

I would guess on mobile that the download would be deferred. I know for sure that display:none; images are deferred on current chrome on android and html5 video is probably the same.

这篇关于如果元素是display:none;在媒体查询中他们仍然加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆