Question

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

单击登录时，屏幕应使用75％alpha 1px png图像淡入淡出。即使图像已预加载，也不会在动画完成后显示。但是，如果单击取消并再次登录，则动画流畅且完美。

有人能想到这个问题的解决方案吗？我也在使用CMS的其余GUI。这就像没有图像预加载那样的东西。

感谢您的回答

编辑：啊，是的，我正在为谷歌Chrome 5.0.375.99开发这个CMS，稍后会增加多浏览器兼容性。很抱歉将其遗漏

Answer 1

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

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

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

感谢您的评论：）

Answer 2

有关此问题的有用信息：

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

Answer 3

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

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

您的问题也可能是浏览器特定的....我发现最好通过将预先加载的内容放入图像数组然后使用数组调用来为预加载的内容创建“锚点”需要时的图像而不是图像URL（URI）。

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

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后）。