为什么图像预加载无效？

我的CMS项目有一个时尚的web 2.0登录屏幕，使用javascript淡出屏幕。即使我已经预先加载了120％的图片（我在开发工具中使用了资源监视器），但是我的登录屏幕出现时仍然需要一秒钟才会显示。它彻底摧毁了幻想！请看：为什么图像预加载无效？

~~http://www.dahwan.info/Melior~~ （链接断开）

当你点击登录，屏幕应该用75％的α-1px的png图片褪色暗。即使图像已预加载，但直到动画完成后才会显示。但是，如果您单击取消并再次登录，动画将流畅而完美地流动。

任何人都可以想出解决这个问题的办法吗？我和我的CMS的GUI的其他部分一样。这就像没有图像预加载过这样的东西。

感谢答案

编辑：是啊，我目前正在开发这个CMS谷歌浏览器5.0.375.99，后来添加多浏览器的兼容性。对不起，离开了这一点

来源

2010-07-12 Hubro

值得一提的是你已经看到了问题的浏览器。我只是在Firefox 3.6中试过它，它似乎工作正常。 – Jake 2010-07-12 18:49:30

链接崩溃我的浏览器选项卡（IE 8 - Vista 32位） – ZippyV 2010-07-12 18:50:53

对不起，反对，但你有没有考虑不使用图像？我过去使用过jQuery Tools覆盖（http://flowplayer.org/tools/demos/overlay/custom-effect.html），并取得了成功。如果你想自己做，你可能只想使用固定的背景RGB图像。为了记录，屏幕对我来说工作正常。 – 2010-07-12 18:53:08

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

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

的图像正在添加到DOM在页面加载，并按照我的理论，我的低端电脑的内存休息，他们当我的CMS需要他们即刻出现。

感谢您的意见:)

来源

2010-07-12 19:13:18 Hubro

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

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

这样做是相当简单：
功能disableBtn（EL）{
变种BTN =的document.getElementById（EL）;
var btnId = btn.id;
btn.disabled = true;
}

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

来源

2010-07-12 19:12:12 frabjousB

我已经排除了图像被缓慢加载作为原因导致我的问题，因为在某些情况下，我已经检查了资源监视器几分钟，甚至在单击登录按钮之前看到显示器中的图像。但是，感谢您的回复 – Hubro 2010-07-12 19:16:26

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

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

您的问题也可能是浏览器的具体情况....我发现最好是通过将它们放入一个图像数组然后使用该数组调出来为预加载内容创建一个“锚点”在需要时代图像而不是图像URL（URI）。

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

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

来源

2010-07-12 21:06:12 exoboy

将图像加载到数组中是我已经使用的方法。我再次道歉提供这么少的信息。无论如何，我已经解决了这个问题，并回答了它:) – Hubro 2010-07-13 00:41:11

很酷！我很高兴它运作良好。但是，你所做的事情实际上会占据舞台（页面）上的空间，而我的音乐会将它保存在空灵的平面（记忆）中，而没有任何舞台上的实体存在的风险或移动内容的可能性，不需要定义任何CSS。 – exoboy 2010-07-13 04:32:46

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

的Codemonkey解决方案的工作，因为，通过将图像在一个隐藏的DIV，浏览器必须保持在内存中，并准备将这些图像的div的可见性可能发生变化。如果用户需要将div的隐藏可见性从隐藏变为阻塞，则必须立即完成。这就是为什么只将所有图像加载到数组中不能正常工作的原因。

来源

2010-07-13 17:49:39

好吧，使用数组来存储图像对象已为我工作多年。所以，请尽量避免发表评论，你不是100％确定的.... – exoboy 2010-07-14 21:53:34

为什么图像预加载无效？

回答

相关问题