javascript - 图像预加载不起作用

标签 javascript image-preloader

我写了(好吧,复制了)一个 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/

相关文章:

javascript - 使用 ng-hide 和 radio 隐藏元素?

javascript - 未决 promise 后 JSON 输入错误意外结束

javascript - 加载前检查图片是否存在

javascript - 在加载任何 html 元素之前加载图像

javascript - 在ajax响应中执行脚本

javascript - 如何在鼠标悬停时将图像调整到每个站点?

javascript - 优化图像加载

javascript - 仅在达到时加载

javascript - 如何预加载大尺寸图像?