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>
