`display:none` 真的能阻止图像在移动设备上加载吗？

CSS 优化：“display:none”是否真正阻止图像加载？

“display:none”CSS 属性是否有效阻止图像加载移动设备来提高网站速度？

虽然响应式网站设计建议使用“display:none”来隐藏来自移动浏览器的内容，其阻止图像加载的有效性仍不清楚。

答案：

浏览器行为：

当前浏览器技术允许智能处理 CSS 属性。如果浏览器检测到不需要“display:none”的图像，它可能会跳过加载过程。

图像元数据：

即使使用“display: none”应用后，图像的大小和其他元数据仍然可以通过脚本访问，这表明某些加载可能仍然存在

特定于浏览器的行为：

Chrome версии 68.0 及更高版本已观察到，如果使用“display:none”隐藏父元素，则会阻止图像加载。

替代方案解决方案：

如果阻止加载至关重要，替代方法包括：

• 删除文档中的元素
• 将 src 属性设置为“data:”或“about:blank”

限制：

“显示: none" 如果图像出现在第一个屏幕上且没有延迟加载，则不会阻止图像加载。在这种情况下，图像将加载但保持隐藏状态。

以上是`display:none` 真的能阻止图像在移动设备上加载吗？的详细内容。更多信息请关注PHP中文网其他相关文章！