Question

Firefox（以及我认为的其他浏览器）在您单击“停止”按钮或通过Escape键调用它时停止gif动画。

我有一个文本输入，在更改时会使ajax请求更新其他元素。作为这个ajaxyness的一部分，我有一个动画GIF来显示反馈我还在此输入中捕获转义键，以便清除文本字段以获得更好的用户体验。

我的问题是在按下一次转义键后，没有任何ajax GIF动画，直到刷新页面为止。有没有人知道解决方法？

我试过的东西：

我在处理e.stopPropagation();的函数中尝试了e.cancelBubble = true;和e.keyCode == 27，但这似乎不起作用。我怀疑这会停止触发更多的js事件，浏览器会捕获转义而不管js活动。

我通过添加/删除css类来显示/隐藏gif，因此很难应用“更改gif url重置”解决方法。我甚至不知道这是否有效 - 没有测试它。但似乎很难。如果有人知道这有效并且知道使用background-image: url(../images/ajax-loader_dotcirclel13x13.gif); css应用hack的简单方法，那么请告诉我。

Answer 1

不幸的是，当按下ESC键时，您无法覆盖浏览器停止动画gif的事实。我认为这是因为用户总是有能力阻止恼人的GIF动画，如果它们变得过于庞大（我不是说你的加载gif很烦人;））。这个page描述了如何在FF中一起禁用它们。

我建议使用JavaScript创建一个简单的动画。你甚至可以使用带有gif动画中所有帧的精灵来做这件事，然后只为每一帧移动背景位置。

Answer 2

$(document).keydown(function(event){
    if (event.keyCode == 27) {
        //FIXES FIREFOX GIF STOPPING
        event.preventDefault();
    }
});

Answer 3

嗯。您是否考虑使用小型“请稍候”Flash动画？

严重。就粗略测试显示，Flash忽略 Esc 键。

甚至可以将动画GIF导入到Flash电影中。我不知道。

您可以使用JavaScript创建非Flash后备广播（显示原始动画GIF）。

Answer 4

好的，第二个想法：将loading GIF放入单独的HTML文档中，并将其显示在一个没有边框的小IFRAME中。

我有没有想法它是否会起作用。有可能“取消”命令也传播到所有子IFRAME，所以它可能不会。

Answer 5

有同样的问题。将我的动画GIF转换为CSS＆amp;解决了这个问题。此网站允许您构建高级CSS动画http://cssload.net/ 希望有所帮助！

浏览器：按下转义后继续gif动画

我试过的东西：

5 个答案: