Question

<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

Answer 1

之前有人对此进行过测试：

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

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

Answer 2

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

我担心只有html / css才能有条件地加载<img>标签。现在你需要至少一小部分ecmascript，但一如既往，我非常肯定如果我在这里错了，stackoverflow社区会纠正我。

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

什么浏览器下载隐藏图像

2 个答案: