如果元素显示:无;在媒体查询中,它们是否仍然加载

If an element is display: none; in a media query are they loaded in still?

本文关键字:是否 加载 查询 显示 元素 媒体 如果      更新时间:2023-09-26

今天只是在想这个,这让我很好奇。

如果我在

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

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

会影响加载时间吗?

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

这取决于情况和浏览器。在许多情况下,隐藏的资产不会被下载,但如果浏览器认为它会被使用,则可能会被下载。这是一个较老的问题,但它解决了您所追求的问题:

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

我猜在移动设备上下载将被推迟。我确定显示:无;图像在Android上的当前Chrome上被延迟,HTML5视频可能相同。