javascript - 浏览器加载同一张图片 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 属性一起使用

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

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

Network in DevTools

在上图中，第一项是使用预加载代码加载的图像，第二项是单击按钮后再次加载的相同图像，并将图像添加到容器的背景图像属性中。提前致谢!

Answer 1

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

要么是那个，要么是你的服务器设置了无缓存 header ，但我不确定这是否会导致在单个页面上多次加载同一图像。