哪些浏览器会下载隐藏图片

Posted 2023-03-06

【中文标题】哪些浏览器会下载隐藏图片

【英文标题】：What browsers download hidden images

【发布时间】：2012-02-16 18:48:19

【问题描述】：

<style type="text/css">
    .hidden-image-container 
        display: none;
    
</style>
<div class="hidden-image-container">
   <img src="lulcats.png" />
</div>

我主要感兴趣的是移动浏览器对不下载隐藏容器中的图像进行了哪些优化。

这将使我能够显着减少初始下载时间。

Related reference question about loading images across devices

【问题讨论】：

我很确定大多数浏览器仍然会下载“隐藏”元素，因为它假定隐藏元素将在某些时候使用。我能想到的阻止立即下载图像的唯一方法是从隐藏图像容器 div 中删除图像，然后在您希望客户端下载图像时使用 div.innerhtml = img tag html。跨度>

另见***.com/questions/12158540/…

【参考方案1】：

我永远不会将其称为优化，以使浏览器不下载隐藏的图像。这可能有很多充分的理由，并且应该（并​​且将会）仍然被浏览器下载。我没有一些数字表或浏览器，但我很确定所有移动浏览器也会在解释器发现它时立即下载这样的图像。

恐怕没有灵丹妙药可以仅使用 html/css 有条件地加载 <img> 标签。现在你至少需要一点 ecmascript，但与往常一样，我很确定如果我在这里错了，*** 社区会纠正我。

<img> 节点没有像.preventLoad 这样的属性（这确实非常有用）。也许是时候提出whatwg 提案了，我会加入并支持它:-)

【讨论】：

我同意下载图像是“正确”的行为。 FWIW，由 JS 创建的图像总是被加载，即使没有添加到 DOM 树（！）：document.createElement('img').src = '//example.com/example.png';

【参考方案2】：

以前有人测试过这个：

http://www.w3.org/2009/03/image-display-none/test.php

编辑： 看起来该列表不包含许多移动浏览器（目前）。

【讨论】：

有人必须将该 UA 列表解码为一个合理的、可查看的浏览器列表，其中列出了可以执行和不执行的浏览器。

它有 iPhone OS 2-5 和 android。这涵盖了大多数手机，不是吗？