为什么图片预加载无效？答案

【问题标题】：Why is image preloading ineffective?为什么图片预加载无效？
【发布时间】：2011-03-14 23:02:48
【问题描述】：

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

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

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

感谢回答

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

【问题讨论】：

可能值得一提的是您已经在其中看到问题的浏览器。我刚刚在 Firefox 3.6 中尝试过，它似乎可以正常工作。
该链接使我的浏览器选项卡崩溃（IE 8 - Vista 32bit）
很抱歉反回答，但您是否考虑过不使用图片？我过去曾成功使用过 jQuery 工具覆盖 (flowplayer.org/tools/demos/overlay/custom-effect.html)。如果您想自己做，您可能只想使用固定的背景 rgba 图像。作为记录，屏幕对我来说很好用。
史蒂文，我已经考虑过了，但考虑到我的 GUI 的其余部分使用更大的图像具有更复杂的设计，这几乎没有帮助。感谢您的建议
对我来说很好，我正在运行规定的 Chrome 版本。

【解决方案1】：

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

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

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

感谢您的 cmets :)

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

将图像加载到数组中是我已经使用的方法。我再次为提供这么少的信息而道歉。无论如何，我已经解决了这个问题并回复了它:)
酷！我很高兴它运作良好。但是，您这样做的方式实际上会占用舞台（页面）上的空间，而我的方式会将其保留在空灵平面（内存）中，而不会有任何物理存在于舞台上或有可能取代内容的风险，而且确实如此不需要定义任何 CSS。

【解决方案4】：

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

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

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

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

【讨论】：