The picture is preloaded, and there are multiple loads.

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?

Preload

Apr.05,2021

the header of your picture file is not set to be cached. Set cache-control and etag

there is usually a loading page before the active page. Load the picture resources and then jump to the active page

the plug-in demo https://github.com/chenyinkai.

can only be tested.

try this npm I preload-all-S

Previous: How does axios request a picture from a picture server and display it on img?

Next: How does el-scrollbar hide the horizontal scroll bar