图像预加载和缓存不适用于 FIREFOX 中的 javascript 或 html答案

【问题标题】：Image preload and caching not working with javascript or html in FIREFOX图像预加载和缓存不适用于 FIREFOX 中的 javascript 或 html
【发布时间】：2014-03-18 17:20:11
【问题描述】：

目标：我正在使用 jquery 制作停止动画，我需要加载 47 张图像并以 450 毫秒的延迟将它们一个接一个地放置为身体背景。

我遇到问题的部分是我无法正确缓存/预加载图像，以便它们在不闪烁的情况下切换......

我在 $(window).load(function() {.... 中开始动画，所以到那时应该加载所有内容

我已经从 stackoverflow 中尝试了多种方法，并且在整个网络上都有一些方法：

注意：一切都像 GOOGLE Chrome 中的魅力一样工作。 FIREFOX 有问题！ 网站目前托管在 wamp 中。

文档加载中的Jquery：（我尝试在<script></script> 中插入纯javascript，但没有成功

for (var x = 1; x < 47; x++) 
{   preloaded[x]     = new Image();
    preloaded[x].src = 'anim_frame' + x + '.png';
}
} // later I modifed the code to preload sets of 5 images every 5 frames, so when frame 1 is shown frames 5-10 are loaded and so on...works great in chrome

将所有图片直接放在html中作为<img>标签...不起作用。
jQuery 获取图像位置 - 不起作用

我知道可以做到，这个网站做到了，为什么我们不能？ ;) http://discover.store.sony.com/be-moved/

【问题讨论】：

为什么要等文档加载完成才开始加载图片？
没有什么特别的原因，我之前预加载了前五张图片，然后在动画开始时加载其余的图片...我尝试将其放入 doc 中，但对于 firefox 没有成功
你能贴一些代码吗？
我认为仅仅因为 $(window).load() 被调用，这并不一定意味着您的图像已加载。我错了吗？
你说得对，这并不意味着你的图像已加载，我不指望这一点，我只是在那一刻开始我的动画。

标签： javascript jquery html css browser-cache

【解决方案1】：

只有以下解决方案适用于所有浏览器。

对 doc.ready 中的所有图像调用 jQuery.get 并记录已加载的图像数量。一旦它们被加载显示网站......同时显示一个很好的加载器，其中加载了一定百分比的图像;）

【讨论】：