Jquery/Javascript 未激活 gif 图像(仅限 Firefox)
首先要提到的是我的代码可以在 IE8 和 Google Chrome 中运行。 我只在 Firefox 下有这个问题,在 Ubuntu 和 Win XP 下测试过,FF 也有同样的问题。
我正在尝试在刷新页面时显示 ajaxloader gif 图像。 一开始我使用 jquery .ready() 函数来隐藏将显示图像的 div#refreshing 。 当我们单击刷新链接时,我会显示 div#refreshing。我的问题是 ajaxloader.gif 没有转动 就像它应该的那样,它变成了一个固定图像。但正如前面提到的,它可以在 chrome 和 IE 下运行。
知道为什么吗?
HTML:
<div id="refreshing">Refreshing</div>
<a href="javascript: refreshPage();">Refresh</a>
CSS:
#refreshing {
font: 14px Verdana,Arial;
color: #00264b;
background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}
JavaScript:
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.href = window.location.href;
$("#refreshing").toggle();
}
另一件事是 firefox 配置 image.animation_mode 设置为正常。 另外,如果我在萤火虫下看,图像是动画的。
谢谢大家。
First thing to mention is that my code is working in IE8 and Google Chrome.
It's only under Firefox that I have the problem, tested it under Ubuntu and Win XP same issue with FF.
I'm tryng to display an ajaxloader gif image while I am refreshing the page.
At the very beginning I am using jquery .ready() function to hide the div#refreshing that would display the image.
When we click on the refresh link then I show the div#refreshing. My problem is that the ajaxloader.gif is not turning
like it should be it becomes to be a fix image. But as mentionned it works under chrome and IE.
Any idea why?
HTML:
<div id="refreshing">Refreshing</div>
<a href="javascript: refreshPage();">Refresh</a>
CSS:
#refreshing {
font: 14px Verdana,Arial;
color: #00264b;
background: url("/med/base/img/ajax-loader-blue.gif") center no-repeat;
}
JavaScript:
$(document).ready(
function() {
// hide the ajax loader
$("#refreshing").hide();
}
);
function refreshPage() {
$("input").attr("disabled", "disabled");
$("select").attr("disabled", "disabled");
$("img").attr("onclick", "");
$("a").attr("href", "#");
window.location.href = window.location.href;
$("#refreshing").toggle();
}
One more thing is that the firefox config image.animation_mode is set to normal.
Plus if I look under firebug the image is animated.
thank you everyone.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
它不起作用的原因是 Firefox 在页面刷新时停止所有 gif 动画。
为了使这项工作正常进行,您应该通过 ajax 加载页面(或者更好的是,仅加载更新的部分)并用新内容覆盖现有内容。
The reason it doesn't work is because Firefox stops all gif animations on page refresh.
In order to make this work you should load the page (or better yet, only the updated parts) via ajax and overwrite the existing content with the new.
我终于在一个美好的周三早上喝了杯咖啡让它开始工作。
这是代码,当 Firefox 停止 GIF 图像工作时,我用它来显示
用户认为我们正在刷新页面,我认为这可能只是我刷新页面的方式不正确。
因此,我在 Javascript 中使用 window.location.reload() 搜索另一种刷新页面的方法;
我尝试过,但这种方法只有一个问题,我在刷新时停用的输入在刷新时仍然被禁用。
我正在 $(document).ready(function() 中重新激活它们 。 { //激活输入 });
最后它工作正常,但我仍然发现重新激活很奇怪。
我终于找到了 window.location.href=window.location.href 和 window.location.reload() 之间的区别
在这里得到了 -> window.location.href=window 之间的差异。 location.href 和 window.location.reload()
因此,通过将参数 true 传递给 reload 函数,我们告诉 reload 函数不要发布旧的 POST 数据,并从服务器。
这完全解决了我的问题。
我没有更改 HTML 代码,也没有更改 CSS
谢谢大家。
I finally manage to get it to work with a coffee on a good Wednesday morning.
Here is the code, while Firefox was stopping the GIF image to work and I was using it to display
the user that we were refreshing the page, I though it could be just the way I was refreshing the page that was incorrect.
So I search another way of refreshing the page in Javascript some where using window.location.reload();
I tried it, but there was only one problem with this method, my input that I desactivate while refreshing were still disabled on refresh.
I went in the process of reactivating them within a $(document).ready(function() { //activate input });
At the end it was working fine, but I still found the reactivating odd.
I finally search for the difference between window.location.href=window.location.href and window.location.reload()
Got it here -> Difference between window.location.href=window.location.href and window.location.reload()
So by passing the argument true to the reload function we tell the reload function to not post the old POST data and get a fresh copy of the page from the server.
That fixed completly my issue.
I didn't change the HTML code neither the CSS
Thank you everyone.
另一个解决方案是使用 html5 canvas 元素来实现动画加载程序。它在页面重新加载时应该仍然可以正常工作。
该生成器运行良好,并且跨浏览器兼容 http://heartcode.robertpataki.com/canvasloader/
Another sollution is to use a html5 canvas element for animated loaders. It should still work fine on page reload.
This generator works pretty well and is cross browser compatible http://heartcode.robertpataki.com/canvasloader/