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

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

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

有关跨设备加载图像的相关参考问题

4

2 回答 2

11

之前有人测试过:

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

编辑:
看起来列表不包含许多移动浏览器(还)。

于 2012-01-23T15:10:07.383 回答
2

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

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

<img>节点没有类似的属性.preventLoad(这确实非常有用)。也许是时候whatwg提出建议了,我会加入并支持它:-)

于 2012-01-23T12:14:41.467 回答