为什么图像预加载无效？

Question

我的 CMS 项目有一个时尚的 Web 2.0 登录屏幕，它使用 JavaScript 在屏幕上淡入淡出。为什么即使我已经 120% 确定图像已预加载（我在开发工具中使用了资源监视器），当我的登录屏幕出现时，它们仍然需要一秒钟才能显示。彻底破坏了幻想！看看：

http://www.dahwan.info/Melior （链接已损坏）

当您单击“登录”时，屏幕应该使用 75% alpha 1px png 图像淡入黑暗。尽管图像已预先加载，但直到动画完成后才会显示。但是，如果您单击“取消”并再次登录，动画就会流畅、完美。

谁能想到解决这个问题的方法吗？我的 CMS GUI 的其余部分也有它。就好像没有任何图像预加载一样。

感谢您的回答

编辑：是的，我目前正在为 Google Chrome 5.0.375.99 开发此 CMS，稍后添加多浏览器兼容性。抱歉忽略了这一点

Answer 1

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

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

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

感谢您的评论:)

Answer 2

关于此问题的有用信息：

Codemonkey 解决方案之所以有效，是因为通过将图像放入隐藏的 div 中，浏览器必须将这些图像保留在内存中，并为 div 可见性可能发生的更改做好准备。如果用户需要将 div 的可见性从隐藏更改为阻止，则必须立即完成。这就是为什么仅将所有图像加载到数组中无法正常工作的原因。

Answer 3

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

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

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

这是一篇涵盖该主题的简短文章。

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

Answer 4

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

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

这样做相当简单：
函数disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}

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