javascript - 如果元素显示 : none; in a media query are they loaded in still?

Question

今天刚想到这个，让我很好奇。

如果我在网站上有一些元素或者div，比如video标签，如果我设置这个video标签显示:none；在移动用户的媒体查询中。

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

它会影响加载时间吗？

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

Answer 1

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

Does "display:none" prevent an image from loading?

我猜在移动设备上下载会被推迟。我肯定知道 display:none;图片在 android 上的当前 chrome 上延迟，html5 视频可能是相同的。