display: none 情况下图片是如何加载的

0 阅读1分钟

1. 元素有display: none

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<style>

.img {
  display: none;
}
.img-bg{
  width: 600px;
  height: 600px;
  display: none;
  background-image: url('https://cdn.shopify.com/s/files/1/0648/2991/5367/files/PC_Banner_1x_958a0a00-e421-49a3-9b66-deb13387919e.png?v=1725526994');
}
</style>
<body>
  <div class="parent">
    <img src="https://cdn.shopify.com/s/files/1/0648/2991/5367/files/PC_Banner_1x_958a0a00-e421-49a3-9b66-deb13387919e.png?v=1725526994" alt="" srcset="" class="img"  />
    <div class="img-bg"></div>
  </div>
</body>
</html>

2. 如果父元素有{display: none;}

如果父元素有{display: none;}的样式的话,子元素在样式表中的背景图片既不会渲染也不会加载,但是标签上的图片会被加载不会被渲染,如设置了lazy属性不会被加载

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<style>
  .parent {
    display: none;
  }
.img {
  /* display: none; */
}
.img-bg{
  width: 600px;
  height: 600px;
  /* display: none; */
  background-image: url('https://cdn.shopify.com/s/files/1/0648/2991/5367/files/PC_Banner_1x_958a0a00-e421-49a3-9b66-deb13387919e.png?v=1725526994');
}
</style>
<body>
  <div class="parent">
    <img src="https://cdn.shopify.com/s/files/1/0648/2991/5367/files/PC_Banner_1x_958a0a00-e421-49a3-9b66-deb13387919e.png?v=1725526994" alt="" srcset="" class="img" loading="lazy" />
    <div class="img-bg"></div>
  </div>
</body>
</html>

3. 不存在的元素,如果样式表里有写,也不会请求加载

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<style>
  .parent {
    display: none;
  }
.img-bg3333{
  width: 600px;
  height: 600px;
  display: none;
  background-image: url('https://cdn.shopify.com/s/files/1/0648/2991/5367/files/PC_Banner_1x_958a0a00-e421-49a3-9b66-deb13387919e.png?v=1725526994');
}
</style>
<body>
  <div class="parent">
  </div>
</body>
</html>

4. 伪类背景图片只在触发伪类时候才会请求加载(因此建议请求雪碧图—即一堆小图汇总到一张大图上,这样不会有UI跳跃感)

5. 已经请求过的相同图片不会重复请求