我正在使用div制作封面图像。不知何故，这个div标记需要时间来加载图像或刷新图像。如果我使用img标记，封面图像会直接呈现，即在加载页面时已经显示了图像。
在div标签中，
<div class="cover-img"></div>
.cover-img {
width: 100%;
height: 100%;
background-image: url(cover.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
图像是在页面加载后加载的，因此看起来像是在刷新。
<img class="cover-img" src="cover.png">
.cover-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
在这种情况下，图像在加载页面时已经呈现，因此看起来很好。
我希望这是有道理的，不要明白为什么这会有不同的表现。
为了更快地加载图像，您应该做一些事情。
- 首先调整图像大小。图像越大，大小越大，加载速度就越慢
- 优化您的图像格式。CCD_ 1和CCD_
-
加载更少的资源我的意思是，使用
loading="lazy"在您的网站上加载其他图像可以帮助浏览器更快地集中精力加载您的图像 - 您也可以使用
CDN作为图像链接 - 压缩图像有很大帮助。使用像tinyPNG这样的工具图像的理想大小应该小于1MB，大小越小加载越快
- 您还可以使用
loading=" eager"属性更快地加载图像了解有关加载的更多信息
最后，我所说的一切都可以帮助你，但最终，这将取决于用户的连接以及用户设备的处理能力。
<!DOCTYPE html>
<html>
<head>
<title>Refresh Image</title>
</head>
<body>
<!-- Display the image -->
<img id="gfgimage" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
height="100" width="auto" />
<script>
// Create a timestamp
var timestamp = new Date().getTime();
// Get the image element
var image = document.getElementById("gfgimage");
// Adding the timestamp parameter to image src
image.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?t=" + timestamp;
console.log(image.src);
</script>
</body>
</html>请添加这样的脚本代码。