关于display：none；的图片加载

最新推荐文章于 2022-09-03 23:50:47 发布

原创最新推荐文章于 2022-09-03 23:50:47 发布 · 7.3k 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

本文详细探讨了CSS中display:none属性对于图片加载的影响，包括不同情况下的图片加载行为、伪类背景图片的加载时机以及重复图片请求的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如果元素有{display: none;}的样式的话，标签上的图片会被请求加载，但是不会被渲染

例子：

<style>
.img-container {
background-image: url(../imgs/icon1.png);
}
</style>

<div class="img-container" style="display:none"></div>
<img src="../imgs/icon2.png" style="display:none">

其中icon1.png和icon2.png会请求后端进行加载，但是因为样式属性不会计算该元素的布局

2、如果父元素有{display: none;}的样式的话，子元素在样式表中的背景图片既不会渲染也不会加载，但是标签上的图片会被加载不会被渲染

例子：


<style>
.img-container {
background-image: url(../imgs/icon1.png);
}
</style>

<div style="display:none">
<div class="img-container"></div>
<img src="../imgs/icon2.png">
</div>

3、伪类背景图片只在触发伪类时候才会请求加载（因此建议请求雪碧图---即一堆小图汇总到一张大图上，这样不会有UI跳跃感）

4、已经请求过的相同图片不会重复请求

5、不存在的元素，即时样式表里有写，也不会请求加载