我写了(好吧,复制了)一个 Javascript 图像预加载函数,它似乎在我的页面加载时成功地预加载了我的图像,但是当页面实际需要显示图像时,有一个延迟,在此期间它显然会再次加载它们,破坏了预加载的目的。此行为的可能原因和修复方法?
我试过但未能创建可重现的代码,所以我猜这是因为我整个项目的复杂性。这是我正在使用的图像预加载功能:
function preload(sources)
{
var images = [];
for (i = 0, length = sources.length; i < length; ++i) {
images[i] = new Image();
images[i].src = sources[i];
}
}
当页面加载时,我对存储在我们服务器上的一长串图像调用此方法,我可以在我的控制台中看到一长串“GET”请求,这似乎表明它确实在预加载图像。稍后,当图像显示在动态生成的内容中时(如果重要,则使用 jQuery),加载它们时会出现延迟,我在控制台中看到另一个 GET 请求,状态为“HTTP/1.1 304 Not Modified”。所以看起来图像正在再次加载而不是使用缓存版本。可能是什么原因造成的?
我确实在图像预加载之后、图像显示之前发生了一些 ajax 调用,其中包含“cache: false”——这可能是原因吗?但是,这些 ajax 调用不会直接影响页面内容 - 它们只是用于获取数据库信息,进而影响页面内容。
顺便说一下,我正在使用 Firefox 进行测试。我在某处读到 Chrome 有时会发送请求以查看缓存的图像是否已被修改,但这应该不是 Firefox 的问题。
最佳答案
关闭 Firebug,您的图像将不会被加载两次。如果您打开了 Firebug ,您预加载的图像将不会被缓存。
您可以使用类似 Charles 的代理来验证此行为
关于javascript - 图像预加载不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22614387/