图片预加载,出现多次加载

一个活动图片太多,想要做预加载,但是发现会出现多次加载,并没有从缓存中读取。

<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;
}

clipboard.png

我看有很多用new Image来预加载图片,但是这里来看并没有从缓存中读取数据,请问大家做活动通过什么方式来做到图片预加载。

阅读 4.1k
3 个回答

你的图片文件的 header 没有设置可以缓存的,设置一下cache-control 和 etag

一般在活动页之前有个loading页面,将图片资源加载完后再跳转到活动页

可以才考下这个插件demo https://github.com/chenyinkai...

试试这个 npm i preload-all -S

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进