有没有人知道在您单击链接或在 IE 中的页面上提交表单后使动画 GIF 继续动画的解决方法？这在其他浏览器中运行良好。
谢谢。
问问题
117745 次
16 回答
99
接受的解决方案对我不起作用。
经过更多研究后，我遇到了这个解决方法，它确实有效。
这是它的要点：
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 中测试。
于 2009-12-15T02:58:37.303 回答
35
老问题，但将其发布给谷歌同事：
Spin.js 确实适用于这个用例：http ://fgnass.github.com/spin.js/
于 2011-08-22T17:58:28.303 回答
18
IE 假定单击链接预示着新的导航，当前页面内容将被替换。作为对此进行处理的过程的一部分，它会停止为 GIF 设置动画的代码。我怀疑您可以对此做些什么（除非您实际上没有导航，在这种情况下，请在 onclick 事件中使用 return false ）。
于 2009-04-23T07:12:01.293 回答
17
这是一个 jsFiddle，在使用 method="post" 提交表单时效果很好。在表单提交事件中添加微调器。
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}
于 2013-01-24T08:53:06.400 回答
8
我遇到了这篇文章，虽然它已经得到了回答，但我觉得我应该发布一些信息来帮助我解决这个特定于 IE 10 的问题，并且可能会帮助其他遇到类似问题的人到达这篇文章。
我很困惑动画 gif 是如何在 IE 10 中不显示的，然后我发现了这个宝石。
Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages
希望这可以帮助。
于 2013-12-26T17:32:35.380 回答
2
我在处理表单提交时尝试显示加载 gif 时遇到了这个问题。它增加了一层乐趣，因为同一个 onsubmit 必须运行验证器以确保表单正确。像其他人一样（在互联网上的每个 IE/gif 表单帖子上），我无法让加载微调器在 IE 中“旋转”（并且，在我的情况下，验证/提交表单）。在浏览http://www.west-wind.com上的建议时，我发现 ev13wt 的一篇帖子表明问题是“...... IE 不会将图像渲染为动画，因为它在渲染时是不可见的。 " 这是有道理的。他的解决方案：
将 gif 所在的位置留空，并使用 JavaScript 在 onsubmit 函数中设置源 - document.getElementById('loadingGif').src = "path to gif file"。
这是我实现它的方式：
<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>
这在所有浏览器中对我都很有效！
于 2013-01-07T19:28:38.043 回答
2
这就是我所做的。您所要做的就是将您的 GIF 分解为 10 张图像（在这种情况下，我以 开头01.gif和结尾10.gif）并指定保存它们的目录。
HTML：
<div id="tester"></div>
JavaScript：
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）。
注意：我没有在 IE6 中对此进行测试，因为我没有运行 60 年代浏览器的机器，尽管该方法非常简单，甚至在 IE6 及更低版本中也可能有效。
于 2012-01-28T22:42:44.283 回答
2
在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';
}
于 2015-11-20T16:24:14.057 回答
1
Building on @danfolkes' answer, this worked for me in IE 8 and ASP.NET MVC3.
In our _Layout.cshtml
<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">
<<< content here >>> ...
<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>
And in our navigation links:
<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>
or
@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
于 2013-10-15T15:23:18.757 回答
1
与此相关，我必须找到一个修复方法，将动画 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 动画，但目前看起来不可能。
于 2010-09-28T11:21:18.877 回答
0
刚刚有一个类似的问题。这些对我来说非常有用。
$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');
$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');
另一个想法是使用 jQuery 的 .load(); 加载然后添加图像。
适用于 IE 7+
于 2013-01-10T10:46:48.833 回答
0
我意识到这是一个古老的问题，到目前为止，原始发帖人都找到了适合他们的解决方案，但我遇到了这个问题，发现 VML 标签不会成为这个 IE 错误的受害者。使用 VML 标签放置在 IE 浏览器上时，动画 GIF 在页面卸载期间仍会移动。
请注意，在决定使用 VML 标签之前，我首先检测到了 VML，因此这在 FireFox 和其他使用正常动画 GIF 行为的浏览器中工作。
这是我解决这个问题的方法。
<input class="myExitButton" type="button" value="Click me" />
<div class="loadingNextPage" style="display:none" >
<span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
<img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
<div>Just one moment while we access this information...</div>
</div>
<script language="javascript" type="text/javascript">
window.LoadProgress = (function (progress, $) {
var getdialogHeight = function (height) {
var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
if (isIE) {
return height + 'px';
}
return height;
};
var isVmlSupported = function () {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
var supported = b ? typeof b.adj == "object" : true;
a.parentNode.removeChild(a);
return supported;
};
var showAnimationDuringPageUnload = function () {
if (isVmlSupported()) {
$(".loadingNextPage > .spinnerImage").hide();
}
else {
$(".loadingNextPage > .spinnerImageVml").hide();
}
};
var openLoadingMessage = function () {
$(".loadingNextPage").dialog({
modal: true,
closeOnEscape: true,
title: 'Please wait...',
closeText: 'x',
height: getdialogHeight(200),
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
};
$('.myExitButton').click(function () {
openLoadingMessage();
showAnimationDuringPageUnload();
window.location.href = 'http://www.stackoverflow.com';
});
return progress;
})(window.LoadProgress || {}, window.jQuery);
</script>
自然，这依赖于 jQuery、jQueryUI 并且需要某种类型的动画 GIF（“/images/loading_gray.gif”）。
于 2012-02-28T17:30:37.037 回答
0
查询：
$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');
于 2012-07-02T18:59:37.987 回答
0
非常非常晚回答这个问题，但我刚刚发现使用在 CSS 中编码为 base64 URI 的背景图像，而不是作为单独的图像，继续在 IE8 中设置动画。
于 2013-12-03T14:48:00.367 回答
0
一个非常简单的方法是使用 jQuery 和SimpleModal 插件。然后，当我需要在提交时显示我的“加载”gif 时，我会：
$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );
于 2017-03-28T20:19:23.590 回答
-1
我遇到了同样的问题，这对于其他浏览器（如 Firefox）也很常见。最后我发现在表单提交时动态创建一个带有动画 gif 的元素没有动画，所以我开发了以下工作方法。
1）在document.ready()页面中找到的每个表格，接收position:relative属性，然后给每个表格附加一个不可见的DIV.bg-overlay。
2）在此之后，假设我的网站的每个提交值都由btn-primarycss 类标识，再次在document.ready()，我寻找这些按钮，遍历每个按钮的 FORM 父级，并在表单提交时，我触发showOverlayOnFormExecution(this,true);函数，通过单击按钮和切换可见性的布尔值DIV.bg-overlay。
$(document).ready(function() {
//Append LOADING image to all forms
$('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');
//At form submit, fires a specific function
$('form .btn-primary').closest('form').submit(function (e) {
showOverlayOnFormExecution(this,true);
});
});
CSS forDIV.bg-overlay如下：
.bg-overlay
{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:rgba(255,255,255,0.6);
z-index:100;
}
.bg-overlay img
{
position:absolute;
left:50%;
top:50%;
margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
margin-top:-40px;
max-width:auto;
max-height:80px;
}
3) 在任何表单提交时，都会触发以下函数以在其上显示一个半白色背景覆盖（拒绝再次与表单交互的能力）和其中的动画 gif（视觉显示加载操作）。
function showOverlayOnFormExecution(clicked_button, showOrNot)
{
if(showOrNot == 1)
{
//Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button
$(clicked_button).closest('form').find('.bg-overlay').show();
}
else
$('form .bg-overlay').hide();
}
在表单提交时显示动画 gif，而不是在此事件中附加它，解决了各种浏览器的“gif 动画冻结”问题（如前所述，我在 IE 和 Firefox 中发现了这个问题，而不是在 Chrome 中）
于 2015-02-02T09:28:53.910 回答