设置了 "display:none" 图片是否加载？

发表于   |   分类于

预计2个月完事儿的项目做了半年，终于，要烂尾了，哦不，是收尾。

有一整月的时间都在做性能优化。网页里有大量的图片和视频，每次视频缓冲出现 loading 图标的时候，我都要跟着爆炸了，因为产品总会说“这种体验是上不了线的”。

前前后后尝试了很多种加载图片和视频的策略，无非就是哪些做预加载，把资源放在哪里的问题。

把一个视频网站做烂真的是轻而易举。

言归正传，当时想过这样一个问题：设置了 display:none 或 visibility: hidden 的图片究竟会不会加载？

之所以这个问题记这么清楚，是因为我在校招笔试的时候遇到过，并且我清晰的记得，当时很开心的蒙了一个答案。

看来这注定是一个面试题驱动的个人网站。

浏览器信息

据说这个问题在不同浏览器的表现不大一样，我用的是 chrome 59.0.3071.115。

useragent 信息如下：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

img 标签

原图如下：

我为它们分别设置了属性 display: none 和 visibility: hidden。

HTML 

1
2
<img class="dog" src="images/dog.png" alt="dog">
<img class="cat" src="images/cat.png" alt="cat">

CSS 

1
2
3
4
5
6
7
.dog {
  display: none;
}

.cat {
  visibility: hidden;
}

结果是：

显而易见，图片加载了。

background 属性

把图片放到背景图里再试试。

HTML 

1
2
<div class="dog"></div>
<div class="cat"></div>

CSS 

1
2
3
4
5
6
7
8
9
.dog {
  background-image: url(images/dog.png);
  display: none;
}

.cat {
  background-image: url(images/cat.png);
  visibility: hidden;
}

结果是图片再一次加载了。

令人崩溃的结论

说白了，如果你想试图用 css 来控制图片加载，还是别想了。

唯一的办法就是用 js 控制，原理和方法参见上一篇文章： 《lazyload 图片懒加载》