Javascript 为什么图像预加载无效？

我的CMS项目有一个时尚的Web2.0登录屏幕，使用javascript在屏幕上淡出。为什么即使我已经确保120%的图像已预加载（我使用了开发工具中的资源监视器），当我的登录屏幕出现时，它们仍然需要一秒钟的时间才能显示出来。它完全摧毁了幻想！看一看:

（链接断开）

单击“登录”时，屏幕应使用75%alpha 1px png图像淡入黑暗。即使图像已预加载，但在动画完成后才会显示。但是，如果单击“取消”并再次登录，动画将流畅完美地流动

有人能想出解决这个问题的办法吗？我的CMS的GUI的其他部分也有它。这就像没有图像预加载一样

谢谢你的回答

---

编辑：啊，是的，我目前正在为谷歌Chrome 5.0.375.99开发这个CMS，稍后添加多浏览器兼容性。很抱歉没有提到这一点，UI线程一次只能管理一个任务——它将执行javascript或更新UI。如果在预加载图像的代码之前有大量javascript解析/执行，这可能会导致延迟

另一个建议是在页面上检测到图像之前，禁用登录链接的可点击性

这样做相当简单：
功能禁用btn（el）{
var btn=document.getElementById（el）；
var btnId=btn.id；
btn.disabled=true；
}

---

要重新启用，请设置btn.disabled=false（在检测到您的图像已添加到DOM之后）。

我已经找到了解决问题的方法。我现在已经在两台不同的计算机上的三个浏览器中进行了测试，结果非常理想。简言之，在javascript中的图像预加载函数中，我在一个不可见的Div标记中将每个图像添加到DOM中

$('#img_preload').append($('<img />').attr('src', img.src));

$（'#img_preload'）。追加（$（'
现在，这些图像在页面加载时被添加到Dom中，根据我的理论，它们存放在低端计算机的内存中，当我的CMS需要它们时，它们会立即出现

感谢您的评论：）
您也可以将它们预加载到数组中。您的问题可能是由所谓的“垃圾收集”引起的。这是浏览器查找正在消耗内存的对象的地方，这些对象在屏幕上不再有实例，也没有被内存中的任何其他对象引用

如果将图像预加载到web时代，则应将其加载到缓存中。因此，当再次引用时，它们仍应重新出现。但是，如果缓存过期时间未设置为这些类型文件的足够长，则图像也可能会消失

您的问题也可能是特定于浏览器的……我发现，最好为预加载的内容创建一个“锚”，将它们放入图像数组，然后在需要时使用该数组调用图像，而不是图像URL（URI）

下面是一篇快速而肮脏的文章，介绍了这个主题

有关此问题的有用信息：

Codemonkey解决方案之所以有效，是因为通过将图像放入隐藏的div中，浏览器必须将这些图像保存在内存中，并为div可见性的可能更改做好准备。如果用户需要将div的可见性从隐藏更改为块，则必须立即执行。这就是为什么只需将所有图像加载到数组doe中sn无法正常工作。
可能值得一提的是，您在浏览器中看到了这个问题。我刚刚在Firefox 3.6中试用过，它似乎工作正常。该链接使我的浏览器选项卡（即8-Vista 32位）崩溃。对于反答案，很抱歉，但您是否考虑过不使用图像？我使用了jQuery工具覆盖（）在过去取得了成功。如果你想自己做，你可能只想使用一个固定的背景rgba图像。作为记录，屏幕对我来说很好。史蒂文，我已经考虑过了，但这几乎无助于考虑我的GUI的其他部分，它有一个更复杂的设计，使用更大的图像。谢谢你的建议ThoughtWorks对我来说很好，我正在运行指定的Chrome版本。我排除了加载缓慢的图像是导致我的问题的原因，因为在某些情况下，我已经检查了资源监视器几分钟，甚至在单击“登录”按钮之前看到了监视器中的图像。但感谢您将图像重新加载到数组中是一种方法我已经在使用了。我再次为提供的信息太少而道歉。无论如何，我已经解决了问题，并回答说：）酷！我很高兴它工作得很好。但是，你这样做实际上会占用舞台（页面）上的空间，而我的方式会将其保留在以太平面（内存）中，不会有任何在舞台上出现的风险或替换内容的机会，并且不需要定义任何CSS。使用数组存储图像对象已经为我工作了多年。所以，请尽量避免发表你不是100%肯定的评论。。。。