there are too many active images and I want to preload them, but I find that they are loaded multiple times and are not read from the cache.
<body>
<img src="./img/arrow.png" id="slogn">
<div class="loading" id="loading" style="display: none;">
<div class="slogan"></div>
</div>
<script>
var loadImg = new Image();
loadImg.src = "img/slogn.png";
loadImg.onload = function () {
document.getElementById("slogn").src = "img/slogn.png"
setTimeout(function () {
document.getElementById("loading").style.display = "block"
},5000)
}
</script>
</body>
css:
.slogan{
background: url("../img/slogn.png") no-repeat center;
}
I see that many people use new Image to preload pictures, but here they don"t read data from the cache. How do you preload pictures?