javascript - 为什么图片预加载无效？

Question

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

当您单击登录时，屏幕应该使用 75% alpha 1px png 图像淡化为黑暗。即使图像是预加载的，它也不会在动画完成后显示出来。但是，如果您单击取消并再次登录，则动画流畅而完美。

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

感谢您的回答

编辑：是的，我目前正在为 Google Chrome 5.0.375.99 开发这个 CMS，稍后添加多浏览器兼容性。很抱歉漏掉了

score 2 · Accepted Answer

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

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

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

感谢您的意见：）

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

这是一篇涵盖此主题的快速而肮脏的文章。

score 0 · Accepted Answer

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

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

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

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

4 回答 4