有没有人知道如何解决在IE浏览器中点击链接或提交表单后,使动画GIF继续保持动画效果的方法? 在其他浏览器中这个功能都能正常运行。
谢谢。
有没有人知道如何解决在IE浏览器中点击链接或提交表单后,使动画GIF继续保持动画效果的方法? 在其他浏览器中这个功能都能正常运行。
谢谢。
我接受的解决方案对我无效。
经过进一步的研究,我找到了这个解决方法,它实际上是有效的。
以下是要点:
function showProgress() {
var pb = document.getElementById("progressBar");
pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
pb.style.display = '';
}
在你的HTML中:
<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
<img src="./progress-bar.gif" width="200" height ="40"/>
</div>
因此,当表单提交时,<img/>
标签将被插入,但由于某种原因,它不受ie动画问题的影响。
已在Firefox、ie6、ie7和ie8中进行了测试。
code
<div id="img_content">
<img id='aj_loader' src='assets/2631.gif' style="display:none;"/>
</div>然后:code
$("#img_content").html($("#img_content").html()); - misaizdaleka虽然这个问题比较老,但我还是给大家分享一下:
Spin.js可以用于解决这个问题:http://fgnass.github.com/spin.js/
IE假设单击链接意味着进行新的导航,当前页面内容将被替换。 为了准备这一过程,它会停止动画GIF的代码执行。 我怀疑你对此无能为力(除非你实际上没有进行导航,在这种情况下,请在onclick事件中使用return false)。
这里有一个 jsFiddle,在表单提交时使用 method="post" 完全正常。旋转器是在表单提交事件中添加的。
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}
01.gif
开始到10.gif
结束),并指定它们所在的目录即可。
HTML:
<div id="tester"></div>
function pad2(number) {
return (number < 10 ? '0' : '') + number
}
var
dirURL = 'path/to/your/images/folder',
ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
jQuery('#tester').append(ajaxLoader);
set(0);
});
function set(i) {
if (i > 10) i = 1;
img.src = dirURL + pad2(i) + '.gif';
setTimeout(function() {
set(++i);
}, 100);
}
这种方法适用于IE7、IE8和IE9(虽然对于IE9,你可以使用spin.js
).
我在http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html找到了这个解决方案,并且它有效!只需要在将图像设置为可见之前重新加载即可。从您的按钮的onclick调用以下JavaScript函数:
function showLoader()
{
//*** Reload the image for IE ***
document.getElementById('loader').src='./images/loader.gif';
//*** Let's make the image visible ***
document.getElementById('loader').style.visibility = 'visible';
}
在gif应该放置的位置留空,并使用JavaScript在onsubmit函数中设置源 - document.getElementById('loadingGif').src =“gif文件路径”。
以下是我的实现方法:
<script type="text/javascript">
function validateForm(form) {
if (isNotEmptyid(form.A)) {
if (isLen4(form.B)) {
if (isNotEmptydt(form.C)) {
if (isNumber(form.D)) {
if (isLen6(form.E)){
if (isNotEmptynum(form.F)) {
if (isLen5(form.G)){
document.getElementById('tabs').style.display = "none";
document.getElementById('dvloader').style.display = "block";
document.getElementById('loadingGif').src = "/images/ajax-loader.gif";
return true;
}
}
}
}
}
}
}
return false;
}
</script>
<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
<!-- FORM INPUTS... -->
<input type="submit" name="submit" value=" Authorize ">
<div style="display:none" id="dvloader">
<img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
Working... this process may take several minutes.
</div>
</form>
这在所有浏览器中都对我有效!
关于这个问题,我不得不找到一个解决方案,其中动画GIF被用作背景图像,以确保样式保持在样式表中。类似的解决方案也适用于我...我的脚本大致如下(我使用jQuery使其更容易获取计算的背景样式 - 如何在没有jQuery的情况下实现这一点是另一个帖子的主题):
var spinner = <give me a spinner element>
window.onbeforeunload = function() {
bg_image = $(spinner).css('background-image');
spinner.style.backgroundImage = 'none';
spinner.style.backgroundImage = bg_image;
}
[编辑] 经过更多的测试,我刚刚意识到这在IE8中不适用于背景图片。我一直在尝试我能想到的一切来让IE8在加载页面时呈现gif动画,但目前看起来似乎不可能。
$(spinner).css('background-image')
)读取CSS代码,但是在设置时却使用了纯Javascript的方式(spinner.style.backgroundImage
)。你的代码在任何浏览器中都无法正常工作。如果我直接使用你的代码,那么我会得到cannot set backgroundImage property of undefined
错误。如果我更改你的代码以使用jQuery设置CSS,则代码可以正常运行而不会出现任何错误,但是图像未被重置,div / spinner元素仍为空。我不知道为什么? - trejder<body style="min-width: 800px">
<div id="progress">
<div style="min-height: 200px">
</div>
<div id="throbber">
<img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
margin-left: auto; margin-right: auto" />
</div>
</div>
<div id="main">
<<内容在此>>
<script type="text/javascript" language="javascript">
function ShowThrobber() {
$('#main').hide();
$('#progress').show();
// Work around IE bug which freezes gifs
if (navigator.appName == 'Microsoft Internet Explorer') {
// Work around IE bug which freezes gifs
$("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
}
</script>
<script type="text/javascript" language="javascript">
function HideThrobber() {
$('#main').show();
$('#progress').hide();
}
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
HideThrobber();
});
</script>
<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>
或者
@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })