浏览器加载相同的图像2次

Question

我正在尝试预加载图像并将其与css background-image一起使用，但我在制作浏览器时遇到了麻烦（目前仅通过Chrome测试）预装图像。

我正在用这段代码加载图片：

for(var i = 1; i <= options.imageCount; i++){
    let img = new Image()
    var src = options.imagePath + i + "." + quality + "." + options.imageFormat

    img.onload = () => {
        completeCount += 1

        if(completeCount == options.imageCount){
            callback(true)
        }
    }

    img.src = src
}

如果我尝试将Images对象附加到容器中，它可以正常工作。

DOMImgContainer.appendChild(img);

但是，如果我尝试使用带有css background-image属性的Image

DOMZoom.style.backgroundImage = "url('" + img.src + "')";

浏览器再次加载图像，而不是使用已经预加载。

Network in DevTools

在上图中，第一项是加载了预加载代码的图像，第二项是单击按钮后再次加载的相同图像，并将图像添加到容器的background-image属性中。提前致谢！

Answer 1

我猜你有错误的路径，将鼠标悬停在网络选项卡中的两个图像文件名上，并确保完整路径匹配。

或者您的服务器正在设置无缓存标头，但我不确定这是否会导致单个页面上的同一图像多次加载。

Answer 2

好吧，事实证明问题与代码无关，我正在为这篇文章做一个完整的工作片段，而且，它在片段上工作得很好，所以我更深入地发现罪魁祸首实际上是http-服务器（NodeJS简单的http服务器），我正在使用的开发服务器。

出于某种原因，当我的代码在http服务器上运行时，浏览器无法预加载图像。