什么浏览器会下载隐藏的图像

Question

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

我主要关心的是移动浏览器如何进行优化，以避免下载隐藏容器中的图像。

这可以显著减少初始下载时间。

相关参考问题：如何在设备间加载图像

- Raynos

---

我相信大多数浏览器仍会下载“隐藏”的元素，因为假定这些隐藏的元素最终会被使用。我所能想到的唯一方法是从你的hidden-image-container div中移除该图像，然后在你希望客户端下载图像时使用div.innerHTML = img tag html。 - ToddBFisher

请参见 https://dev59.com/x2ct5IYBdhLWcg3wWMFF - Pino

Answer 1

之前有人测试过这个：

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

编辑：
看起来这个列表还没有包括很多移动浏览器。

- user123444555621

---

有人需要将UA列表解码为可视化的浏览器列表，其中包括哪些浏览器是和不是。 - Raynos

它支持iPhone OS 2-5和Android。这覆盖了大多数手机，不是吗？ - ThinkingStiff

Answer 2

我认为浏览器不下载隐藏图像并不能称为浏览器的“优化”。这样做可能有很多好的原因，而且浏览器仍然会下载它（应该也会）。我没有数字或浏览器的表格，但我相当确信所有移动浏览器一旦发现图像，就会立即下载。

很遗憾，目前还没有仅使用HTML/CSS有条件地加载<img>标签的方法。现在至少需要一点ECMAScript，不过我相信stackoverflow社区会纠正我如果我错了。 <img>节点没有像.preventLoad这样的属性（这确实非常有用）。也许是时候提出一个whatwg建议了，我会加入并支持它 :- )

- jAndy

---

我同意下载图像是“正确”的行为。顺便说一下，由JS创建的图像始终会被加载，即使没有添加到DOM树中(!)：document.createElement('img').src = '//example.com/example.png'; - user123444555621