图片预加载，出现多次加载
一个活动图片太多，想要做预加载，但是发现会出现多次加载，并没有从缓存中读取。
<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;
}
我看有很多用new Image来预加载图片，但是这里来看并没有从缓存中读取数据，请问大家做活动通过什么方式来做到图片预加载。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你的图片文件的 header 没有设置可以缓存的，设置一下cache-control 和 etag
一般在活动页之前有个loading页面，将图片资源加载完后再跳转到活动页
可以才考下这个插件demo https://github.com/chenyinkai...
试试这个 npm i preload-all -S