为什么图像预加载无效？

Question

我的CMS项目有一个时尚的Web 2.0登录界面，使用JavaScript在屏幕上淡入淡出。即使我已经确保图片已经预加载（我使用开发工具中的资源监视器），但当我的登录界面出现时，它们仍然需要一秒钟才能显示出来。这完全破坏了它的美感！请看：http://www.dahwan.info/Melior (链接已失效)。

当您点击登录时，屏幕应该使用75%透明度的1px png图像淡化为黑色。尽管图像已经预加载，但直到动画完成后它才会显示出来。但是，如果您点击取消并再次登录，则动画会流畅而完美地进行。

有人能想出解决这个问题的方法吗？我在我的CMS GUI中也遇到了同样的问题。就好像根本没有预加载图像一样。

谢谢回答。

编辑：啊，是的，我目前正在为Google Chrome 5.0.375.99开发此CMS，稍后添加多浏览器兼容性。对于漏掉的信息，表示抱歉。

- Hubro

---

可能值得提到你在哪些浏览器中遇到了问题。我刚在Firefox 3.6中尝试了一下，似乎工作正常。 - Jake

抱歉对你的问题进行反向回答，但你考虑过不使用图片的方案吗？我过去使用过jQuery Tools overlay (http://flowplayer.org/tools/demos/overlay/custom-effect.html)，取得了成功。如果你想自己实现，也许可以考虑使用固定背景rgba图片。就我个人而言，这个屏幕对我来说是正常工作的。 - Steven

它在我的Firefox 3.6.6，Opera 10.60和Safari 5.0上运行良好，但在IE 8上崩溃。 - Mike

您不需要使用Dimensions插件，它已经随jQuery一起提供了相当长的时间。请检查其他插件的兼容性。 - redsquare

对我来说很好用，而且我正在运行所述的Chrome版本。 - Puppy

Answer 1

我已经想出了解决问题的方法。我在两台不同的计算机上使用三种浏览器进行了测试，结果完美无缺。简而言之，在我的JavaScript图像预加载函数中，我将每个图像添加到一个不可见的Div标签中的DOM中。

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

现在，在页面加载时，将图像添加到DOM中，并根据我的理论保存在低端计算机的内存中，当我的CMS需要它们时，它们会立即出现。

感谢您的评论 :)

- Hubro

Answer 2

关于这个问题的有用信息：

Codemonkey 的解决方案之所以有效，是因为将图像放在隐藏的 div 中，浏览器必须将这些图像保存在内存中，并准备好可能更改 div 可见性的情况。如果用户需要将 div 的可见性从隐藏更改为块，则必须立即执行。这就是为什么仅将所有图像加载到数组中不起作用的原因。

- Jr. Hames

---

使用数组来存储图像对象对我来说已经行之有效多年了。因此，请尽量避免发表您不确定的评论... - exoboy

Answer 3

你也可以将它们预加载到数组中。你的问题可能是由所谓的“垃圾回收”引起的。这是浏览器查找消耗内存的对象，这些对象在屏幕上不再有实例，并且没有被内存中的其他任何东西引用。

如果你将图像预加载到网页中，它们应该被加载到缓存中。因此，当再次引用时，它们应该仍然出现。但是，如果缓存过期时间没有设置足够长的话，图像也可能会消失。

你的问题也可能是特定于浏览器的...我发现最好的方法是创建一个“锚点”，将它们放入图像数组中，然后使用数组在需要时调用图像，而不是使用图像URL(URI)。

这里有一篇快速而简单的文章，涵盖了这个主题。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

- exoboy

---

将图像加载到数组中是我已经使用的方法。对于提供如此少的信息，我再次道歉。无论如何，我已经解决了这个问题并回复了 :) - Hubro

太棒了！我很高兴它能正常工作。但是，你现在的做法实际上会占用舞台（页面）的空间，而我的方法将其保留在虚幻平面（内存）中，没有任何物理存在的风险或内容被替换的机会，并且不需要定义任何CSS。 - exoboy

Answer 4

UI线程一次只能处理一个任务--它将执行JavaScript或更新UI。如果在预加载图像的代码之前有大量的JavaScript解析/执行，那可能会导致延迟。

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

这样做非常简单：
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}

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

- frabjousB

---

我已经排除了图片加载缓慢作为问题的原因，因为在某些情况下，我已经检查资源监视器几分钟甚至在点击登录按钮之前就能看到监视器中的图片。但还是感谢您的回复。 - Hubro