Question

我正在尝试预加载图像并将其与css背景图像一起使用，但是在使浏览器（目前仅在Chrome上进行过测试）预加载图像时遇到了麻烦。

我正在使用以下代码加载图片：

DOMImgContainer.appendChild(img);

如果我尝试将Images对象附加到容器中，则效果很好。

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

但是，如果我尝试将图像与css background-image属性一起使用

year_born = int(input('what year were you born? ')) year = 2019 age = year - year_born if age >= 65: print('Here is your pensioners ticket.') elif age <= 18: print('Here is your child\'s fare ticket.') #need to escape the backslash here btw else: print('here is your ticket.')

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

Network in DevTools

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

Answer 1

我猜测您输入的路径错误，将鼠标悬停在“网络”标签中的两个图像文件名上，并确保完整路径匹配。

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

Answer 2

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

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

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

2 个答案: