当您点击登录时,屏幕应该使用75%透明度的1px png图像淡化为黑色。尽管图像已经预加载,但直到动画完成后它才会显示出来。但是,如果您点击取消并再次登录,则动画会流畅而完美地进行。
有人能想出解决这个问题的方法吗?我在我的CMS GUI中也遇到了同样的问题。就好像根本没有预加载图像一样。
谢谢回答。
编辑:啊,是的,我目前正在为Google Chrome 5.0.375.99开发此CMS,稍后添加多浏览器兼容性。对于漏掉的信息,表示抱歉。
$('#img_preload').append($('<img />').attr('src', img.src));
现在,在页面加载时,将图像添加到DOM中,并根据我的理论保存在低端计算机的内存中,当我的CMS需要它们时,它们会立即出现。
感谢您的评论 :)
关于这个问题的有用信息:
Codemonkey 的解决方案之所以有效,是因为将图像放在隐藏的 div 中,浏览器必须将这些图像保存在内存中,并准备好可能更改 div 可见性的情况。如果用户需要将 div 的可见性从隐藏更改为块,则必须立即执行。这就是为什么仅将所有图像加载到数组中不起作用的原因。
你也可以将它们预加载到数组中。你的问题可能是由所谓的“垃圾回收”引起的。这是浏览器查找消耗内存的对象,这些对象在屏幕上不再有实例,并且没有被内存中的其他任何东西引用。
如果你将图像预加载到网页中,它们应该被加载到缓存中。因此,当再次引用时,它们应该仍然出现。但是,如果缓存过期时间没有设置足够长的话,图像也可能会消失。
你的问题也可能是特定于浏览器的...我发现最好的方法是创建一个“锚点”,将它们放入图像数组中,然后使用数组在需要时调用图像,而不是使用图像URL(URI)。
这里有一篇快速而简单的文章,涵盖了这个主题。
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
UI线程一次只能处理一个任务--它将执行JavaScript或更新UI。如果在预加载图像的代码之前有大量的JavaScript解析/执行,那可能会导致延迟。
另一个建议是,在页面上检测到图像之后,禁用登录链接上的可点击性。
这样做非常简单:
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}
要重新启用,请设置btn.disabled = false(在检测到已将图像添加到DOM之后)。