West Wind Hero Image

Rick Strahl's Weblog

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All things Web
Contact   •   Articles   •   Products   •   Support   •  
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows
advertise here

Animated GIF images in hidden page elements

December 27, 2004 • 111 comments
On this page:

Here’s an HTML and IE issue that I haven't been able to figure out. In a number of my HTML forms I dynamically show and hide elements using the style tags within the JavaScript code:

 

document.getElementById('MainForm').style.display='none';

document.getElementById('WaitForm').style.display='inline';

 

This works great, except for an apparent bug in Internet Explorer that doesn’t want to display animated GIF images as animated once the image has been rendered into a container that is not visible.

 

Here is a a typical scenario: An order submission form when the application goes off to process credit cards and gives the user a 10 second ‘please wait’ interface. THe page starts out displaying the MainForm as visible, then when the order gets submitted it sets the MainForm display to 'none' and the WaitForm to 'inline' or '', which effectively swaps the displays.

 

It works great EXCEPT that Internet Explorer will not show animated GIF images as animated in the newly made visible panel. I’ve tried a number of approaches around this to force IE to refresh the image but none of them seem to work.

 

Here's the HTML for the WaitNote panel:

 

   <div id="WaitNote" style="display:none" >

   <p>&nbsp;</p>

   <table  height="300" border="1" cellpadding="25" align="center">

   <tr><td valign="center" class="gridalternate">

         <p>

         <center>

         <img id="WaitImage" src="images/pleasewait.gif">

         <p>

         <p>&nbsp;</p>

         <span style="font-size:12pt;font-weight:bold;">

   We're processing your credit card.</span><br>

         This process may take a few seconds, so please be patient.                 

         </center>

   </td></tr></table>

   <p>

   </div>

 

Then on the Forms' OnSubmit event this function is called:

 

function ShowWaitDisplay()

{

   document.getElementById('MainForm').style.display='none';

   document.getElementById('WaitNote').style.display='inline';

   Img = document.getElementById('WaitImage');

   Img.style.display="inline";

   Img.src = "images/pleasewait.gif";

   window.scrollTo(0,0);

   return true;     

}

 

As you can see I tried to explicitly reload the image and force the image style to be inline but that didn't help. I’ve also tried to set up the image without a SRC attribute to start with and load it later in the function, but this only causes IE to not display the image at all - it seems the page doesn't refresh.

 

Anybody know if there’s some way to force IE to refresh the document?

 

Of course this works just fine in FireFox any way that I try this, but it sure would be nice to get this to work in IE too. If I can’t I’ll have to go and resort to an IFRAME approach, which would make this a bit more complicated and also less browser compatible.

 

 


The Voices of Reason

David Cartmel
December 28, 2004

# re: Animated GIF images in hidden page elements

Have you tried
document.getElementById('MainForm').style.display='none';

document.getElementById('WaitNote').style.display='';
I had thought inline was among the unsupported tags in IE like inherit and collapse. I will have to play around with that one.

December 28, 2004

# re: Animated GIF images in hidden page elements

It's my understanding that 'inline' is the same as ''. But in any event I tried '' just for kicks and it has the exact same effect. No animated gif in IE.
December 28, 2004

# re: Animated GIF images in hidden page elements

I don't know for sure, but I think I remember that IE used to stop gif animations whenever certain (maybe any) javascript functions were fired. It may be the js that is killing the animation.


[BTW "display:inline" is supported by IE, isn't the same as '' (as far as I know) and is very important (the diff between block and inline is something that is pretty much required knowledge if you're doing any CSS work at all).]
December 28, 2004

# re: Animated GIF images in hidden page elements

Shannon, that's why I explicitly use 'inline' instead of '' <g>. '' uses the default mode, and I think it's inline in IE.

I need to look into the script issue. I tried running the form without hiding the panel and it comes up with the animating gif. Then when I explicitly set it to visible (calling the ShowWaitDisplay), the image stops. So I think you're on to something here.

Question is: Is there a way around this. This really sucks...
December 28, 2004

# re: Animated GIF images in hidden page elements

I got this to work with an IFRAME, but this task also wasn't as straightforward as it should be <g>.

First add the IFRAME:

<iframe height="500" width="95%" ID="WaitFrame" src="WaitForm.htm" scrolling="no" frameborder="0" style="display:none">
</iframe>

Then the script:

function ShowWaitDisplay()
{
document.getElementById("MainForm").style.display="none";
IFrame = document.getElementById("WaitFrame");
IFrame.src = "waitform.htm"
IFrame.style.display = "inline";
window.scrollTo(0,0);
return true;
}

Note that both the frame and the script set the IFRAME source. This is the only way I could get both IE and Mozilla to properly render the frame. Leave the Src off the IFRAME and Mozilla will not display anything (apparently this is a refresh problem). Leave it off the script code and IE will not animate the image because apparently the display:none makes IE turn off animation even inside of a frame. With a static HTML page this doesn't matter I suppose, but with a dynamic page this would mean two loads of the page...

A dynamic page would have hte advantage that you could make it somewhat dynamic and pass different text into the form for the message.
January 03, 2005

# re: Animated GIF images in hidden page elements

I'm doing this on a site where an animated search gif is displayed.

The trick is to toggle the CSS visibility attribute as well as the display attribute.

// show gif
searchingimg.style.visibility = "visible";
searchingimg.style.display= "inline";

// hide gif
searchingimg.style.visibility = "hidden";
searchingimg.style.display= "none";

January 10, 2005

# re: Animated GIF images in hidden page elements

IE will stop loading/doing any animations once a form is submitted. The trick is to reset the image source after it's submitted. Here is what I use in a similar situation. Note, I have onSubmit='show_progress()' in the form tag.

function show_progress()
{

var dv = document.getElementById('saveevent');
var pg = document.getElementById('progress');

if(dv && pg) {
dv.style.display = 'none';
pg.style.display = 'block';
}

setTimeout('document.images["pbar"].src = "images/progress_bar.gif"', 200);

}
Jacco van Dingstee
March 23, 2005

# re: Animated GIF images in hidden page elements

Yes,

This did the trick also by me:

setTimeout('document.images["pbar"].src = "images/progress_bar.gif"', 200);

Cheers all.
Richard Marr
April 04, 2005

# re: Animated GIF images in hidden page elements

I got this to work using:

document.getElementById("myElement").innerHTML = "<img src='animation.gif'>";

It's not elegant, but it does the job.
Nic
May 27, 2005

# re: Animated GIF images in hidden page elements

Richard,
Cheers, that worked a treat!
June 02, 2005

# re: Animated GIF images in hidden page elements

setTimeout worked fo me too.
Great
Thanks
June 09, 2005

# re: Animated GIF images in hidden page elements

Thanks! This has been giving me fits.
David
July 06, 2005

# re: Animated GIF images in hidden page elements

The problem I have is with ASPNET, my form is runat="server". I can't add onSubmit="do something()" as it breaks the ASPNET's submit.

Any Ideas?
lllll
July 26, 2005

# re: Animated GIF images in hidden page elements

David use in page_load

If (Not Page.IsPostBack) Then Me.button.Attributes.Add "onclick", "do something()")
End If
Jon
August 09, 2005

# re: Animated GIF images in hidden page elements

setTimeout! Hooray!
anonymous
October 27, 2005

# re: Animated GIF images in hidden page elements

the setTimeout trick works for me. I'm so glad I found this....
DotNetter
November 23, 2005

# re: Animated GIF images in hidden page elements

This doesn't seem to work in FireFox, not for me atleast.

Any clues?

Thanks
Dotnetter
November 23, 2005

# re: Animated GIF images in hidden page elements

I figure it out, firefox like style.visible as opposed to style.display
tanvir[@]gmail[.]com
January 02, 2006

# re: Animated GIF images in hidden page elements

also, u can wrap the image inside a SPAN. like:

<span id="WaitImage" <img src="images/pleasewait.gif"></span>

i got the same problem... and solved by wrapping with SPAN. IE sucks.
ev13wt
January 11, 2006

# re: Animated GIF images in hidden page elements

How to solve animated gif problem in C#:

The problem is simply that IE doesn't render the image as animated cause it was invisible when it was rendered. So the solution is simple.

Lets say for example we are dealing with an image as follows :


<div id='myHiddeDiv' style='display:none'>
<img src='' id='myAnimatedImage'>
</div>
<input type='button' value='show image' onclick='showDiv();'>

<script languag='javascript'>
function showDiv()
{
document.getElementById('myHiddeDiv').style.display ="";
document.getElementById('myAnimatedImage').src = "http://www.nowhere.com/animatedGif.gif";
}
</script>

The solution described above will solve this problem because the browser only fetches the image once the element is visible. Hence no issues.
ev13wt
January 11, 2006

# re: Animated GIF images in hidden page elements

Re: The animated gif problem asp .net c# ie ( internet explorer )

Sorry in the about post the following tag:

<script languag='javascript'>

is incorrect. The correction is as follows:

<script language='javascript'>
Javier Troconis
February 25, 2006

# re: Animated GIF images in hidden page elements

in order to tap into default asp.net __doPostBack function, you could do something like :


var old__doPostBack = __doPostBack;
__doPostBack = function(eventTarget, eventArgument)
{
old__doPostBack(eventTarget, eventArgument);
// your custom function calls go here
}
Ric Parodi
March 21, 2006

# re: Animated GIF images in hidden page elements

OK, this is good and it is working. The problem I am having (and I am doing something similar to Rick's code at the top of the article) is that when the credit card fails, how do I turn off the animated image on the same page? The credit card check is done as part of the page.validate event, so I just want to show this when the form is submitted (the client side validation has taken place) and then to disappear if the server side validation fails....
Ric Parodi
March 21, 2006

# re: Animated GIF images in hidden page elements

Duh! Here it is:
function showProcess()
{
if (Page_ClientValidate())
{
document.getElementById("spanProcess").style.visibility = "visible";
setTimeout("document.getElementById('pbar').src='/images/indicator.gif';",10);
setTimeout("z=document.getElementById('spanProcess');",1000);
}
return true;
}
Bhushan
July 12, 2006

# re: Animated GIF images in hidden page elements

What If there are number of gif images on the page?
Actually i m showing gif images in a table(HTML). They are working fine when they r shown first time on page means they r playing well.now when user clicks on a image this gif image(clicked) is shown in a popup window using js.at this moment the gifs on the parent page stop playing.Also this happens only in IE.It works fine in Firefox.
The setTimeout adviced in this post works fine with one image but i want all the images to stay playing after the popup appears.One more thing the url for src of imgs are retreived from database and this url is passed to the js at the time of popup.I can reload the parent page but I want to avoid it as I think if I only refresh the images on the page my task is done.
Thanx in advance.
Regards.
Bhushan.
Srinivas
July 19, 2006

# re: Animated GIF images in hidden page elements

Thank you very much, setTimeout did the trick.

Thank you very much whoever is the first discoverer. I just wanted to be so skillfull as this person.

Regards,
Sri.
Olivier Dony
September 28, 2006

# re: Animated GIF images in hidden page elements

The easiest solution that did the trick for me in both Mozilla/Safari and IE:

<div id="progressBar" style="display:none;">
<img src="animatedBar.gif"/>
</div>

then in the onsubmit() of the form which does my file upload:

var div = document.getElementById('progressBar');
div.style.display = '';
setTimeout(200,'document.getElementById('progressBar').innerHTML = document.getElementById('progressBar').innerHTML);

The replacing of the innerHTML of the div by its own innerHTML seems to work, you only have to do it using setTimeout.
Brad
October 11, 2006

# re: Animated GIF images in hidden page elements

What would be the best way to do this using a 'onclick' event within a normal hyperlink?
Bjoern
October 25, 2006

# re: Animated GIF images in hidden page elements

You could also set the animated gif as the background-image of a table cell or any other html-tag that can have a background-image.

<table>
<tr>
<td style="background:url('../path/to/image/animated.gif');">&nbsp;</td>
</tr>
</table>

Now you hide/display the table with javascript and the animated gif will always be displayed in IE.
Jason
November 29, 2006

# re: Animated GIF images in hidden page elements

None of these solutions worked for me. It stops when there is a javascript call to make a XMLHttpRequest. Once that call is done the gif will start looping again using any of the solutions above. The question that I can't answer is how to keep it looping during that call?
November 29, 2006

# re: Animated GIF images in hidden page elements

Are you running your XmlHttpRequest asynchronously? If not you should. IE has a single main thread and if you fire XmlHttpRequest synchronously everyting stops on that UI thread until your return from the XmlHttp call. Make the call asynchronously and this shouldn't be a problem.
Jason
November 30, 2006

# re: Animated GIF images in hidden page elements

Thanks Rick, it is running asynchronously. After some more debugging I found that it works great for those few ms during the call but it then hangs up when it's trying to do an xsl transformation (IE code): this.container.innerHTML = this.xmlDocument.transformNode(this.xslStyleSheet); Which I guess is expected due to having only one thread. Any ideas for work arounds or other possible ways to let the users know that it's working?
November 30, 2006

# re: Animated GIF images in hidden page elements

Try using window.setTimeout() to force your operation to run asynchronously. I'm not 100% sure that'll work but I think it should.
Jason
November 30, 2006

# re: Animated GIF images in hidden page elements

Wow, that's fast! I couldn't use setTimeout because of the 'this' problem "When you pass a method to setTimeout() (or any other function, for that matter), it will be invoked with a wrong this value. This problem is explained in detail in the JavaScript reference." (http://developer.mozilla.org/en/docs/DOM:window.setTimeout)

Right now I'm trying to do the xsl transformation on the server-side instead to speed things up (not a solution to the problem but it'll help hide the issue). The server-side works well and pretty quick too but the request.responseText cuts out when assigning it to a div's innerHTML (when using alert(this.req.responseText) it shows all of the html and doesn't cut it off). This is outside the scope of the Animated Gif image subject but maybe it'll help someone traversing the web for an answer.
November 30, 2006

# re: Animated GIF images in hidden page elements

Jason, you can do that by using function.call or function.assign.

More info here:
http://west-wind.com/weblog/posts/6951.aspx

Been there and gone through that same pain with figuring out how keep state in JavaScript <s>...
December 11, 2006

# re: Animated GIF images in hidden page elements

It looks like the setTimeout() trick doesn't work in IE 7. Neither does the the full replacement of the innerHTML or using background...
Mike
December 12, 2006

# re: Animated GIF images in hidden page elements

We are having exactly the same issue on our site. Rick, it sounds like you've tried most, if not all, f the above suggestions; in your opinion, what's the best workaround?
Is it "use the timeout and don't worry about IE7" ?

Thanks.
Mike
December 12, 2006

# re: Animated GIF images in hidden page elements

Actually, I just tried the timeout thing and it worked in IE7 for me. My submit button has
a "onclick=foo()", and after I added the timeout line to the end of foo(), it worked.
December 12, 2006

# re: Animated GIF images in hidden page elements

I couldn't get anything to work in IE, but it's a double issue here: The control is not visuble and it's being activated in the onsubmit... No luck with IE 7. The setTimeout trick works in IE 6 and most other browsers of course don't need any tricks to make this work...

Not sure what to do about IE 7 in this scenario.
January 08, 2007

# re: Animated GIF images in hidden page elements

Hi Rick, I'm working on the BusyBoxDotNet project, whose main control does just that, showing a message containing an animated image. Since the release of IE7 I've been stuck with that issue, and I haven't been able to make it work either with any of the tricks. To me this is absolutely a bug in IE7.
Ludo
January 12, 2007

# re: Animated GIF images in hidden page elements

the trick with setTimeout still works in IE7. Try increasing the delay. I put it to 700 and it worked... it failed with 200.
Gabriel
January 31, 2007

# re: Animated GIF images in hidden page elements

If you guys are using jQuery (www.jquery.com) you can do something like this:

setTimeout(function() {
$('img').each(function() {this.src = this.src + '?random=' + new Date().getTime()})
}, 300);

Which would reset the src attribute for each image on the page with the same file plus ?random=<some random number> that would force the image to be reloaded.

This worked for me.
February 06, 2007

# re: Animated GIF images in hidden page elements

Hi guys,

I'm a tester for sitebar.org,

I solved the issue for IE6+ at my testing page above.

SiteBar is an Open Source Software

feel free to view .js and .css source

it works without setTimeout().

Cheers,
Vlad
February 06, 2007

# re: Animated GIF images in hidden page elements

P.S.

to see it in action
try to open bookmark folders
February 07, 2007

# re: Animated GIF images in hidden page elements

Vlad can you tell us how you did that? No much time here to fiddle through 1800+ lines of javascript.
February 07, 2007

# re: Animated GIF images in hidden page elements

in CSS:


body.siteBar div#sb_main span#sb_label_loading
{
/*background: url('progress.gif') no-repeat fixed left;*/
height: 16px !important;
/*padding-left: 18px !important;*/
}

body.siteBar div#sb_main div#sbarBody span#sb_label_loading a.ajax
{
background: #316ac5;
color: white !important;
font-weight: bolder;
padding: 1px 0px !important;
text-decoration: none !important;
vertical-align: bottom !important;
}

/* background-image as animated GIF only works in IE
body.siteBar div#sb_main div#sbarBody div.tree span#sb_label_loading
{
background : #316ac5 url('progress.gif') no-repeat fixed left;
padding-left : 18px;
}
*/
************************************

in JS:



function SB_getJSData(label)
{
var obj = document.getElementById(label);
if (obj)
{
//alert('Javascript data for ' + label + ' not found!');
return obj.innerHTML;
}
//return obj.innerHTML;
}


the above function is referred to in another function

function SB_nodeReload(event, obj)
{
..................
..................

children.innerHTML = '';

for (var i=0; i<level; i++)
{
children.innerHTML += '&nbsp;&nbsp;&nbsp;&nbsp;';
}

children.innerHTML += '<span id="sb_label_loading"><img src="'+SB_getJSData('sb_skinDir')+'progress.gif" alt=""><a href="#a'+obj.id+'" class="ajax">' +SB_getJSData('sb_label_loading') + '</a></span>';

// Yes, this is an AJAX style of doing things
ohttp.onreadystatechange = function()
{
if (SB_xmlHttpReady())
{
var hdrIdx = ohttp.responseText.indexOf("\r");
var nid = ohttp.responseText.substr(1,hdrIdx);

//var children = document.getElementById('cn' + nid);
children.innerHTML = ohttp.responseText.substr('cn'+nid);
}
}

var acl = obj.getAttribute('x_acl');
url = 'index.php?w=sitebar_ajax'+
'&call=loadfolder'+
'&nid='+obj.id.substr(1)+
'&level='+level+
'&acl='+acl +
SB_appendPersistentParams();
SB_xmlHttpSend(ohttp, url);
}
}
}

*************************************

in HTML (generated by PHP script) just below BODY tag:
NOTE: THE PARENT CONTAINER IS HIDDEN, BUT NOT ITS CHILDNODES!

<div class="hidden">

<span id="sb_label_loading">Loading ...</span>

<span id="sb_loader">SB_nodeReload(n,n.parentNode)</span>
</div>

********************************
and all of the above is handled by prototype event-hadler and DOM-loader
AND class-OR-id-selectors
from my JS.API which I modified from

well known JS gurus:


/*
* (c)2006 Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
* For more info, see:
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
* Thrown together by Jesse Skinner (http://www.thefutureoftheweb.com/)
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/

function addDOMLoadEvent(func) {
if (!window.__load_events) {
var init = function () {
// quit if this function has already been called
if (arguments.callee.done) return;

// flag this function so we don't do the same thing twice
arguments.callee.done = true;

// kill the timer
if (window.__load_timer) {
clearInterval(window.__load_timer);
window.__load_timer = null;
}

// execute each function in the stack in the order they were added
for (var i=0;i < window.__load_events.length;i++) {
window.__load_events[i]();
}
window.__load_events = null;
};

// for Mozilla/Opera9
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write("<scr"+"ipt id=__ie_onload defer src=javascript:void(0)><\/scr"+"ipt>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
window.__load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}
// for other browsers
window.onload = init;
// create event function stack
window.__load_events = [];
}
// add function to event stack
window.__load_events.push(func);
SB_preloadImages(images);
}

addDOMLoadEvent(function () {
function attachEH(o, e, f)
{
if(o.attachEvent) o.attachEvent("on"+e,f);
else o.addEventListener(e, f, true); //synchronous AJAX call
}

function detachEH(o, e, f)
{
if(o.detachEvent) o.detachEvent("on"+e,f);
else o.removeEventListener(e, f, true);
}

var Behaviour = {
list: {},
handle : function (e) {
if (!e) e = window.event;
var n = e.srcElement || e.target;
while(n && document.domain) {
try { Behaviour.list[e.type+"__"+n.className](n) } catch (err) {};
try { Behaviour.list[ e.type+"_"+n.id](n) } catch (err) {};
if (n.last) { n.last = null; break; }
n = n.parentNode;
}
},
start : function () {
//start handlers, here you can attach what ever event handlers you need
var d = db || de;
attachEH( d, 'mousedown', Behaviour.handle );
attachEH( d, 'mouseover', Behaviour.handle );
attachEH( d, 'mouseout', Behaviour.handle );
attachEH( d, 'mouseup', Behaviour.handle );
attachEH( d, 'click', Behaviour.handle );
attachEH( d, 'keydown', Behaviour.handle );
attachEH( d, 'keypress', Behaviour.handle );
attachEH( d, 'keyup', Behaviour.handle );
attachEH( d, 'contextmenu', Behaviour.handle );
attachEH( d, 'focus', Behaviour.handle );
attachEH( d, 'mousemove', Behaviour.handle );
attachEH( d, 'dragstart', Behaviour.handle );
},
end : function () {
//end handlers, here you can detach what ever event handlers you need
var d = db || de;
detachEH( d, 'mousedown', Behaviour.handle );
detachEH( d, 'mouseover', Behaviour.handle );
detachEH( d, 'mouseout', Behaviour.handle );
detachEH( d, 'mouseup', Behaviour.handle );
detachEH( d, 'click', Behaviour.handle );
detachEH( d, 'keydown', Behaviour.handle );
detachEH( d, 'keypress', Behaviour.handle );
detachEH( d, 'keyup', Behaviour.handle );
detachEH( d, 'contextmenu', Behaviour.handle );
detachEH( d, 'focus', Behaviour.handle );
detachEH( d, 'mousemove', Behaviour.handle );
detachEH( d, 'dragstart', Behaviour.handle );
}
};

/* usually we start event handlers when document.body is loaded */
Behaviour.start();
//Behaviour.end();
/* examples */
/* command hash name syntax: <event>_<id> or <event>__<className> */
Behaviour.list = {
//element with class "foo" 2 "underscore"
//............
click__loader:function(n){ SB_nodeReload(n, n.parentNode) || SB_getJSData('sb_loader'); location.hash='#an'+n.parentNode.id.substr(1); n.last = true; },
//....................
//element with id "foo" 1 "underscore"
//.................
click_btnCollapse:function(n){ SB_collapseAll(); n.last = true; },
click_btnReloadAll:function(n){ SB_reloadAll(); n.last = true; },
click_btnReload:function(n){ SB_reloadPage(); n.last = true; }
}
});

//Special Operators:this Operator
//http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:this_Operator#Method_binding
//The distinction between methods and functions is made only when they are called:
//method calls pass the "parent object" as this,
//while function calls pass the global object as this.


Best regards,

Vlad
February 07, 2007

# re: Animated GIF images in hidden page elements

P.S.

var d= de || db;//means document.documentElement || document.body

Vlad
pooja
May 04, 2007

# re: Animated GIF images in hidden page elements

Hi ,
I am using an animated gif which shows that the page is loading.In the design it is animating but when the application is run only the image appears ...it is not animating.I dont want to use ajax framework.is there aany way to make this possible
May 23, 2007

# re: Animated GIF images in hidden page elements

I have tried pretty much all of the suggestions listed here and am still having problems with IE7. The 
setTimeout()
works best and cures the problem on all the other browsers as far as I can tell, but Internet Explorer 7 still refuses to play ball.

Any other suggestions anyone?
June 04, 2007

# re: Animated GIF images in hidden page elements

FYI, on IE 7, on Advance settings, Play Animation is disabled by default so you need to put check on it and then restart your browser. I trie this before trying solution posted here and it works.
June 29, 2007

# SO SIMPLE TO FIX GUYS....

Guys guys. Forget all of that complicated scripting. The easiest and fastest way to solve this problem is to just use a CSS background image. IE won't pause animation for backgrounds.

Just make sure the width & height of the div matches the height/width of the background image.
<div id="processing"></div>


.processing {
background: url('/path/to/processing-anim.gif') 50% 50% no-repeat;'
width:250px; height:45px;
}
mike
June 29, 2007

# re: SO SIMPLE TO FIX GUYS....

Small correction:

Should be: #processing { ... } not .processing { ... }
Jay
July 18, 2007

# re: Animated GIF images in hidden page elements

I'm not sure why Richard's idea isn't working for everyone... I have used it and it works fine on Firefox and IE7. This is how I did it:

<input type=submit value=Update onClick="document.getElementById('uploading').style.visibility='visible';document.getElementById('uploading').innerHTML='&lt;font size=2>Uploading...</font><br><img src=images/uploading.gif>'">

<div id=uploading style='visibility: hidden'>
<font size=2>Uploading...</font><br>
<img src=images/uploading.gif>
</div>


I'm guessing this will make the div visible first then load the image which is key to working around this bug in IE.

I also found that if I don't call the image from within the div and just rely on the js to grab it, the image is not animated in Firefox.
Bill Beckelman
July 20, 2007

# re: Animated GIF images in hidden page elements

Does anyone know how to base the showing of the gif on whether client side validation has passed?
Chrissie
August 12, 2007

# re: Animated GIF images in hidden page elements

This works for me:
<script type="text/javascript">
<!--
function showLayer(layerid) {
layer = document.getElementById(layerid);
layer.style.display="inline";
layer.style.visibility = "visible";
setTimeout('document.images["loading"].src = "images/loading.gif"', 900);
}

//-->
</script>
<div id="content"><span id="about"><img src="/images/loading.gif" name="loading"/></span>

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"
onSubmit="showLayer('about')">

Obviously you need to put this lot in the appropriate places, and excuse me if this looks terrible, but i really am no javascripter at all, all i know is i spent a day hacking away at it and this is what worked in the end. Good Luck.
Tom
August 16, 2007

# re: Animated GIF images in hidden page elements

This fix:

SO SIMPLE TO FIX GUYS....
by mikeJune 29, 2007 @ 3:32 pm

...worked perfectly! Many thanks!
Alex
September 05, 2007

# re: SO SIMPLE TO FIX GUYS....

Thanks a lot, Mike!!!

Nice and elegant solution, and... Works!!
Beyond Heloo world...
September 07, 2007

# re: Animated GIF images in hidden page elements

Simple solution: Run the request asynchronously.
September 10, 2007

# re: Animated GIF images in hidden page elements

Unfortunately Mike's solution is NOT working form me in IE 7. It works in 6, but not in 7.

I think the difference here is that the image is initially shown invisibly, so it never was enabled by IE.

60 messages later and it looks like there's still no reliable solution to this problem. Short of the smart ass remark to run asynchronously which is obvious.
September 11, 2007

# re: Animated GIF images in hidden page elements

Should we all fill up a Connect issue report?
September 12, 2007

# re: Animated GIF images in hidden page elements

Simone I think this is a pretty well known issue with IE. I'm fairly certain the IE team knows about this, so this isn't going to help. Anyway where do you even report IE bugs? The IE team doesn't exactly make it easy.
September 15, 2007

# re: Animated GIF images in hidden page elements

Well, Microsoft doesn't make it easy as well with any other products as far as I know.
Harit Gohel
September 18, 2007

# re: Animated GIF images in hidden page elements

Cool, It worked for me.....
September 20, 2007

# re: Animated GIF images in hidden page elements

I've spent days looking for a solution to this. I found the thread at http://forums.tizag.com/showthread.php?t=2507 to be really useful. Two of the contributors posted helpful javascript routines, but I got the best results from combining bits of both of them:

I've tested it in IE6, IE7, Firefox 2.0.0.6, Safari 3.0.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Load Box</title>
<!-- Set Javascript function to make animation appear -->
<script type="text/javascript">

// uses a combination of two different javascript functions from 
// Tanora and helmus, see http://forums.tizag.com/showthread.php?t=2507
// progress bar gifs taken from helmus' page at http://www.biodanza.be/jsgif.php
// image url's are: http://www.biodanza.be/images/loaded_1.jpg
// and http://www.biodanza.be/images/loaded_0.jpg

function show_progress() {
    var load = document.getElementById('loadbox');
    load.style.display = 'block';    
}


var speed =70;
function animategif(id,direction){

// size relates to the number of gif's used in the progress bar
// you'll need a pair of gifs (loaded_1, and loaded_0) for each one.

    size= 7;
    if(id<size && direction){
        document.getElementById("0progres"+id).style.display='none'
        document.getElementById("1progres"+id).style.display=''
        setTimeout("animategif("+(id+1)+",1)",speed);
    }else if(direction){
        animategif(0,0)
    }
    
    if( id<size && (!direction) ){
        document.getElementById("0progres"+id).style.display=''
        document.getElementById("1progres"+id).style.display='none'
        setTimeout("animategif("+(id+1)+",0)",speed);
    }else if(!direction){
        animategif(0,1)
    }
}
</script>
<!-- Set stylesheet to make loader box invisible until Javascript calls for it -->
<style type="text/css">
div#loadbox {
    border: 1px solid #000000;
    width: 200px;
    height: 50px;
    padding: 10px;
    display: none;
    background-color: #FFFF99;
    position:absolute;  
    z-index:9999; 
    left: 419px; 
    top: 279px;
    }
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
</style>

</head>
<body onload="animategif(0,1);">
<!-- add the show_progress function to the link -->
<a href="[link to page that takes an age to load]" onclick="show_progress();">Test</a>
<BR>

<DIV id="loadbox">
      <div align="center"><span class="style1">Processing<br>
      <BR>
      

      <img name="progres" style="display:" id="0progres0" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres0" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres1" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres1" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres2" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres2" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres3" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres3" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres4" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres4" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres5" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres5" src="loaded_1.jpg" width="13" height="13"><img name="progres" style="display:" id="0progres6" src="loaded_0.jpg" width="13" height="13"><img name="progres" style="display:none" id="1progres6" src="loaded_1.jpg" width="13" height="13">  </span><br>
      </div>
</DIV> 


</body>
</html>
shebin
October 16, 2007

# re: Animated GIF images in hidden page elements

FF,ie6,ie7... with some centering of loading image

...

<div id="processingDiv">
<span id="processing" class="processing">
<img id="loading" src="img/kyticka.gif" />
</span>
</div>

...

onclick="showProcessing('processing');"

...

function showProcessing(strObject){

var object = document.getElementById(strObject);

if (window.innerHeight)
{
pos = window.pageYOffset

}
else if (document.documentElement && document.documentElement.scrollTop)
{
pos = document.documentElement.scrollTop

}
else if (document.body)
{
pos = document.body.scrollTop

}

object.style.display = 'inline';
object.style.visibility = 'visible';

//object.style.top = (self.screen.height - pos)/2 - 48;
object.style.top = pos + 150;
//object.style.left = window.pageXOffset + 350 - 74;

setTimeout('document.images["loading"].src = document.images["loading"].src', 1);
}
Parwej
November 19, 2007

# re: Animated GIF images in hidden page elements

All the people have finally got the solution. I am still waiting for image to animate. :(

My Scenario for wait image display consists three page. (I work in ASP.Net)

Page first (From other sites) will have links for second page. Second page will do some processing required for third page. This intermediate page opens the final third page using javascript.

I am displaying the wait image on the second page. I can not put the wait image code on third page.

The second page opens the a blank window using window.open.
Then I write the wait image code into the window.document object. Wait image gets displayed.

Finally redirect to third page by changing the location.href of the blank window.

The wait image is displaying without animation. I have tried with setTimeout/background image. Neither of them worked for me in any browser. Here is the code used.

<script language="javascript">
             var win = window.open(''); 
             var doc = win.document;
    doc.open();
    <%Response.Buffer = true;%>
    doc.writeln('<html>');
    doc.writeln('<body><div id="divLoad"><img src="wait_loading.gif" width="300" height="261" alt="Loading..." ></div>');
    doc.writeln('<br><br>');
    doc.writeln('</body></html>');
    <%Response.Flush();%>
    doc.close();
             win.location.href = ThirdPageurl;
    window.opener = win;
    window.close();
</script>


Will you please tell me what is wrong with the code and what should be done for animating the image?

Please help me out. Client is eating my lil head. Your suggestions would be greatllyyy aprreciated.
reddy
January 24, 2008

# re: Animated GIF images in hidden page elements

thats guys setTimeout() helped me .
Charles
January 30, 2008

# Mike's Simple Solution

Not sure how this is supposed to work in the context of the ORIGINAL request which was...

Getting an image to show ONLY upon submit and ONLY on the same page as the original submit.
Charles
January 30, 2008

# JayJuly's snippet did the trick for me

The Post by JayJuly works perfect for me in Firefox and IE6...have not tested IE7
Very easy to implement also.
**********************************************************************


re: Animated GIF images in hidden page elements
by JayJuly 18, 2007 @ 9:10 am

I'm not sure why Richard's idea isn't working for everyone... I have used it and it works fine on Firefox and IE7. This is how I did it:

<input type=submit value=Update onClick="document.getElementById('uploading').style.visibility='visible';document.getElementById('uploading').innerHTML='&lt;font size=2>Uploading...</font><br><img src=images/uploading.gif>'">

<div id=uploading style='visibility: hidden'>
<font size=2>Uploading...</font><br>
<img src=images/uploading.gif>
</div>



I'm guessing this will make the div visible first then load the image which is key to working around this bug in IE.

I also found that if I don't call the image from within the div and just rely on the js to grab it, the image is not animated in Firefox.
Kurt
February 08, 2008

# re: Animated GIF images in hidden page elements

When i try the innerHTML trick I see the image placeholder but it does not display. Any ideas? I can right click and say... Show Image... and it works
April 27, 2008

# re: Animated GIF images in hidden page elements

I found a Javascript degradable solution that uses prototype's ajax library.
Update function:
1st: include prototype.js:
<script src="includes/prototype.js" type="text/javascript"></script>
2nd: in the header or on a separate .js page:

function showLoader() {
var url = './includes/image_loading.php'; //the location of a page to load
var pars = null ;//any parameters you want to add
var target = 'main-image';//the div of the image to replace or add too
var myAjax = new Ajax.Updater(target, url, {method: 'get',
parameters: pars,
onComplete: function() {
document.myForm.submit()
}});

3rd:
your form:
<form name="myForm" action="index.php" method="post">
...

<input type="submit" onclick="showLoader();return false;" />

}

That seemed to do the trick for me in ie7 and everything else:
example at: www.printmybaby.com/index.php?p=products&id=67
August 26, 2008

# re: Animated GIF images in hidden page elements

Changed this:
document.getElementById('element').style.display = "";
document.form.submit();

to this:
document.form.submit();
document.getElementById('element').style.display = "";

And it worked fine.
ErikS
September 05, 2008

# re: Animated GIF images in hidden page elements

Thans all!

This made it work for me in IE 8. The trick seemed to be, as someone said, add a random url to the image:

function showFormProgress(hideElementID, displayElementID, progressImgElementID) {

var hideElement = document.getElementById(hideElementID);
var showElement = document.getElementById(displayElementID);
var animGif = document.getElementById(progressImgElementID);

if (hideElement && showElement) {
hideElement.style.display = 'none';
showElement.style.display = '';
}

if (animGif) {
setTimeout(function() { animGif.src = animGif.src + "?rnd" + new Date().getTime() }, 300);
}
}
Sanjay
September 08, 2008

# re: Animated GIF images in hidden page elements

Hi Rick,

I have been reading through your post for the past one month and implementing yours as well as others methods to make the GIF animate in IE7 but it wudn't. Kindly help me out.

Mine is not event driven as in, when the page loads, it does lots of processing at the server side and once the processes get over a result page is displayed. I want to show an animated gif file when the processes run. But I was able to see only a single frame of it. I have tried, setTimeout, Mike's solution of CSS editing, innerHTML, iframes, display gif through javascript..

Please reply with some possible solution.

thanks!
Sanjay
Priya
December 17, 2008

# re: Animated GIF images in hidden page elements

Hi Sanjay,
I don't know if u have got any solution but here is some way i solved this problem,

Response.Write("<div id='mydiv' STYLE='FONT-WEIGHT: bold; FONT-SIZE: 10pt; LEFT: 20px; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 40px; TEXT-ALIGN: center() ' >");
Response.Write("&nbsp;");
Response.Write("</div>");
Response.Write("<script> var mydiv = document.getElementById('mydiv'); mydiv.innerHTML = '';</script>");
Response.Write("<script language=javascript>");
Response.Write("function ShowWait()");
Response.Write("{");
Response.Write("mydiv.innerHTML = \"<img src='animatedImage.gif' border='0'>\";}");
Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible';ShowWait();ShowWait();}");
Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';window.clearInterval();}");
Response.Write("StartShowWait();</script>");

I have put this code in page load before anything else is executed, then write your line of code and at the end write these two lines of code.

Response.Flush();
Response.Write("<script language=\"javascript\">HideWait();</script>");
January 09, 2009

# re: Animated GIF images in hidden page elements

It might also be worth checking the z-index on the styling.

I've had this problem tried all possible solutions until i set the z-index to 9999:

function showWait() {
if ($get('<%= imageFile.ClientID %>').value.length > 0) {
$get('ImageUploading').style.display = 'none';
$get('ImageUploadProgress').style.display = 'block';
$get('ImageUploadProgress').innerHTML = '<div id="ProgressDiv" style="width:280px;text-align:center;margin-bottom:10px;z-index:9999;">Uploading Image <br /> <img src="progressbg.gif" /></div>';
}
}
Jeff
January 18, 2009

# re: Animated GIF images in hidden page elements

Every suggestion I have found does not work with IE7 when the "enter" button on the keyboard is used to submit the form instead of clicking on the submit button. The GIF will display, but it is not animated.

My latest attempt does not work at all; just not getting this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Load Box</title>

<!-- Set Javascript function to make animation appear onsubmit -->    
<script type="text/javascript">
function showFormProgress(hideElementID, displayElementID, progressImgElementID) {

var hideElement = document.getElementById(hideElementID);
var showElement = document.getElementById(displayElementID);
var animGif = document.getElementById(progressImgElementID);

if (hideElement && showElement) {
hideElement.style.display = 'none';
showElement.style.display = 'block';
}

if (animGif) {
setTimeout(function() { animGif.src = animGif.src + "?rnd" + new Date().getTime() }, 300);
}
} 
</script>


</head>
<body> 

<form id="hideElementID" action="http://72.155.252.88" onsubmit="showFormProgress();">
<input type="text" name="psword" size="25" style="height:25px; font-size:22px;" />
<input type=button value="submit the form" onclick="showFormProgress();">
</form>
<BR>

<DIV id="displayElementID" style="display:none;">
    Loading:<br/>
    <img id="progressImgElementID" src="images/i_animated_loading_32_2.gif" id="loading">
</DIV>

</body>
</html>


This one works the best so far, but still have the issue with the enter button:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Load Box</title>

<!-- Set Javascript function to make animation appear onsubmit -->    
<script type="text/javascript">
function form_submit() {
    var load = document.getElementById('loadbox');
    document.form1.submit();
    load.style.display = 'block';
    load.src = 'images/i_animated_loading_32_2.gif';
}
</script>

<!-- Set stylsheet to make loader box invisible until Javascript calls for it -->    
<style type="text/css">
div#loadbox {
    border: 1px solid #000000;
    width: 200px;
    height: 50px;
    padding: 10px;
    display: none;
}
</style>

</head>
<body> 

<!--
I used a random IP address for this test so submission would take moments while I watched the loader animation
-->
<form name=form1 action="http://72.155.252.88" onsubmit="form_submit();">
<input type="text" name="psword" size="25" style="height:25px; font-size:22px;" />
<input type=button value="submit the form" onClick="form_submit();">
</form>
<BR>

<DIV id="loadbox">
    Loading:<BR>
    <img src="images/i_animated_loading_32_2.gif" id="loading">
</DIV>

</body>
</html>


Can anyone tell this n00b what he's doing wrong?
Sanjay
February 16, 2009

# re: Animated GIF images in hidden page elements

Hi Priya,

Thank you very much for your help!! Sorry for the prolonged delay to reply as I checked this forum only now. I will go through this and will let you know the result. Again thanks a tom for your time and effort!

Sanjay
Kunal
February 20, 2009

# re: Animated GIF images in hidden page elements

sorry to all I tried each one but still having problem with IE.
I collect the data from first page, redirecting to second where I am showing wating message with animated jif,(redirecting from second to thired page through javascript using window.location.href) still validate the data on thired page.all validations are done on thired page. and after validation I am showing the related information on fourth page.

by using timeout, the image is animating but not going for validations(on thired page).

if I comment the timeout then goes for validation but didnt animate the image.
   <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    </asp:UpdatePanel> 
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate> 
    <img runat="server" src="~/Images/load.gif" /> 
    </ProgressTemplate> 
    </asp:UpdateProgress>
.

if I use the code above it works for firefox but gives problem with IE.

working on issue from last week,still not able to resolved. please give some solution ASAP, client is wating for the same. so plz suggest ASAP.
March 05, 2009

# re: Animated GIF images in hidden page elements

This worked for me:

http://geekrider.wordpress.com/2008/05/29/animated-gif-bug-in-internet-explorer-7/
April 09, 2009

# re: Animated GIF images in hidden page elements

Dear Rick as u can see, u opened a discussion that started in 2003 and it's still going on now days.

Today I disovered animated gif are not working both on IE 7 and FF3 when contents of webpage is run locally on the machine (localhost) instead of running it online.
I'm clueless aboyt the reason, maybe somone could halp.

Anyone can easily test this by running this webpage 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
   <title>Animated gif not working on localhost</title>
   <script type="text/javascript">
      var flag;
      function ToggleAnimatedGifNotWorking()
      {
         var el = document.getElementById("animated_gif");

         if(flag)       
            el.style.background = "url(arrow.gif) no-repeat";
         else
            el.style.background = "url(arrow_on.gif) no-repeat";
         
         flag = !flag;
         window.setTimeout("ToggleAnimatedGifNotWorking()", 2000);
      }
      window.setTimeout("ToggleAnimatedGifNotWorking()", 2000);
   </script>
</head>

<body>
   <h4>The arrow below is as animated gif that should rotate of 90 degrees every 2 seconds, it does work when file in on online on server, but it does not work when file is downloaded on localhost. Both on IE (Internet Explorer 7) and FF (FireFox 3)</h4>
   <div id="animated_gif" style="padding: 20px;">&nbsp;</div>
</body>

</html>


Animated gif arrows and page can be found here: http://www.vanylla.it/test-animated-gif/animated-gif-not-working-on-localhost.html
June 03, 2009

# re: Animated GIF images in hidden page elements

I found a simpler solution. It seems that it works with IE7/IE8 as well.
Basically I am creating an arbitrary parameter with a random value to append to the image URL.
    <div id="curtain" style="visibility:hidden" >
        <img id="spinner" class="hourglass" src = '/images/ajax-loader.gif' />
    </div>
<script type="text/javascript">
    function showCurtain () {
    var curtain= document.getElementById('curtain')
    var spinner = document.getElementById('spinner')
    spinner.src = '/images/ajax-loader.gif?p=$RandomGuid'
    curtain.style.visibility='visible';
    }
</script>

where $RandomGuid is generated server side per each page request. It seems like the result is pretty consistent. I had the impression that it doesn't have to do much with the submit() button being pressed but with the fact that the image is cached, so by applying a fake parameter I force IE to refresh the image everytime.
Paperino
June 04, 2009

# re: Animated GIF images in hidden page elements

This seems to work as well: http://www.stillnetstudios.com/2007/02/04/animated-in-progress-indicator-for-long-running-pages/
Wayne Nort
August 09, 2009

# re: Animated GIF images in hidden page elements

Hi all,

After a weekend of starting out with a popup html window and trying to work around the popup blocking of IE and Firefox, I decided to shift a less intrusive upload progress frame. Which all appeared to work seamlessly when uploading a new image in Firefox. Then only to find the .gif won't animate in IE.

Which brings me here with my head about to explode. Have tried the above methods and they're not working for me. Obviously I'm missing something. Could I get help with this. I'm using the <form> onClick to trigger the image upload and to launch the progress frame.

<script type="text/javascript">
function popup() {
    document.getElementById('popup').style.display='block';
}
</script>
    <div id="overlay"></div>
    <div id="popup"><span>Please wait while we process your request...
    <br />
    <img src="{template_url}/images/uploading.gif" width="128" height="15" /></span></div>
    <input type="submit" name="uploadbutton" value="{lang_submit}" class="button" onClick= "popup();" />

and my CSS
#popup {
    display: none;
    position:absolute;
    top: 50%;
    left: 50%;
    height:150px;
    width: 300px;
    margin-left: -150px;
    text-align:center;
    border:1px solid #666666;
    z-index:15;
    background-color: #FFFFFF;
    padding-top: 50px;
}


Thanks, Wayne
Richard
August 12, 2009

# re: Animated GIF images in hidden page elements

Thanks peperino. Your codes worked for me perfectly. Does anyone know what I can do to make gif image start only after validation?

Richard
August 12, 2009

# re: Animated GIF images in hidden page elements

@Richard - I don't think you can since an animated gif should in theory always animate. If you don't want that you can always display a non-animated gif first and then swap the image with the animated one to 'start it up'.
Richard
August 12, 2009

# re: Animated GIF images in hidden page elements

Thanks Rick. Actually what I want is for the gif to show only after the inputs fields have been validated. When I click the submit button now the gif appears immediately even if any of the input field fails validation.
Jimmy
August 18, 2009

# re: Animated GIF images in hidden page elements

Couldn't you just preload the image, so it loads the whole animated image already?
August 18, 2009

# re: Animated GIF images in hidden page elements

@Jimmy - preloading will still cause problems again in IE because it's not visible.
December 17, 2009

# re: Animated GIF images in hidden page elements 

#  re: Animated GIF images in hidden page elements 
by Paperino June 03, 2009 @ 9:26 pm 
I found a simpler solution. It seems that it works with IE7/IE8 as well.
Basically I am creating an arbitrary parameter with a random value to append to the image URL.
 
    <div id="curtain" style="visibility:hidden" >
        <img id="spinner" class="hourglass" src = '/images/ajax-loader.gif' />
    </div>
<script type="text/javascript"> 
    function showCurtain () {
    var curtain= document.getElementById('curtain')
    var spinner = document.getElementById('spinner')
    spinner.src = '/images/ajax-loader.gif?p=$RandomGuid'
    curtain.style.visibility='visible';
    }
</script>


Just a heads up and a thanks. This worked and fixed the problem for IE7/8. However it opened a new one of Firefox not liking the random string on the end of the gif and displayed nothing at all!. The way I fixed this was to set the background image of the first div to be the image (without random string) and then the background image of the second div to be the image (with the random string).

        <script type="text/javascript">
            function showDiv() {
                var randomString1 = randomString();
                document.getElementById('loading').style.display = 'block';
                document.getElementById('loading').style.visibility = 'visible';
                document.getElementById('loading').style.backgroundImage = 'url(ajax-loader.gif)';
                document.getElementById('loadingImage').style.backgroundImage = 'url(ajax-loader.gif?p=' + randomString1 + ')';
            }
 
            function randomString() {
                var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
                var string_length = 5;
                var randomstring = '';
                for (var i = 0; i < string_length; i++) {
                    var rnum = Math.floor(Math.random() * chars.length);
                    randomstring += chars.substring(rnum, rnum + 1);
                }
                return randomString;
            }
 
        </script>


In firefox, this shows the 'loading' div with background, but as the random string "breaks" the 'loadingImage' image, the second image is not shown.

In IE, the first one shows as a static image, but the second is displayed over the top and animates!
December 17, 2009

# re: Animated GIF images in hidden page elements

Forgot the html and css

<div id="loading">
    <div id="loadingImage">
    </div>                               
</div>



#loading
{

    width:220px;
    height:19px;
    display:none;
    visibility:hidden;
}
 
#loadingImage
{
    width:220px;
    height:19px;
}
Tim Hornbrook
January 26, 2010

# re: Animated GIF images in hidden page elements

If you have jQuery included in your project, this resolved the issue for me..


<div id="contentPanel">
page content before animated gif is to be shown
</div>
<div id="loadingPanel">
    <img id="loadingImage" alt="Loading..." src="loading.gif" />
</div>


$("#content").hide();
$("#loadingPanel").show("fast", function() {
    $("#loadingImage").attr("src", $(this).attr("src"));
});
Tim Hornbrook
January 26, 2010

# re: Animated GIF images in hidden page elements

eep. thats meant to be..

$("#contentPanel").hide();
Azeem Asim
January 29, 2010

# re: Animated GIF images in hidden page elements

See this article. This seems to work ok in IE too.

http://www.reconn.us/content/view/37/47/

Hope it helps.
Bill
April 27, 2010

# re: Animated GIF images in hidden page elements

Rick or anyone, I'm at my wits end trying to figure out how to get animated gifs to play cross-browser ! Have tried for weeks to implement solutions mentioned here with little success.
Here's my HTML code:

<div id="img1" style="position:relative; left:0; top:0; width:100; height:100">
    <img name="stdimg" border=0 src="assets/std.png" alt="Standard img" width=100 height=100  />
  <div class="glitter">
    <a href="#" onMouseover="changeView();" onMouseout="revertView();">
      <img id="glitterimg" name="glitterimg" border="0" src="assets/blank.gif" alt="Fairy-dust img" width="100" height="100"  />
    </a>
  </div>
</div>

Javascript:
if (document.images) {
    std = new Image;
    effect = new Image;
    std.src = "assets/blank.gif";
}
function changeView() { 
/* Do function when using IE browser */
/* test for MSIE x.x */
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
  /* capture x.x version portion and store as a number */
  var ieversion=new Number(RegExp.$1);
  if (ieversion>=6);
  document.getElementById('glitterimg').src = “assets/animation-test.gif”;
}
else {
  /* Do function when using any other browser */
  document["glitterimg"].src = “assets/animation-test.gif”;
} }
function revertView() { 
document["glitterimg"].src = std.src; 
}


I have a standard image (that should never change) and I want to have a glitter effect to play on top of standard image when rollover occurs. Trying to assign "glitterimg" a transparent gif to begin with and then replace it with "animation-test.gif" on rollover. The changeView function is trying to determine if IE browser, as I found browsers need different document callout to work (they worked when separated) but the if-then part is giving me fits.
Help on sorting this out would be greatly appreciated.
Thanks, Bill
Lars Hemel
July 23, 2010

# re: Animated GIF images in hidden page elements

The problem with animated gifs in IE is that they have to be added to the DOM when they are visible, otherwise they are not rendered as such. See http://www.larshemel.com/forum/animated_gif_problems_ie for detailed info.

So, it actually is plain simple. Add the code at the moment you want it to be displayed.
August 24, 2010

# re: Animated GIF images in hidden page elements

Thanks to all who responded, this was a toughie. Here is what worked for me.

CSS
.hideProgress { 
    display: none
}
 
.showProgress {
    position: absolute;
    left: 482px;
    margin-left: -80px;
    display: block
}


JavaScript
function submitBtnClicked()
{
    var item = document.getElementById( "loadingImage" );
    if (item) 
    {
        item.className = 'showProgress';
        setTimeout( 'document.getElementById( "loadingImageSrc" ).src = "images/loading.gif"', 200 );
    }
}


HTML
<div id="loadingImage" class="hideProgress">
<img src='' id='loadingImageSrc'>
</div>
September 10, 2010

# re: Animated GIF images in hidden page elements

When lots of load on webpage gif image not work in IE.
to resolve this please use jQuery progress bar.

please visit here for complete example
http://www.codeproject.com/KB/progress/JQueryProgressBar.aspx
Nathan
October 04, 2010

# re: Animated GIF images in hidden page elements

I just wanted to let everyone know that I was having trouble with this issue, and Tim's solution (using jQuery) a few posts up worked for me! The only addition I had to make to it was to initially hide "loadingPanel" when the page loads by executing this line of code in $(document).ready:
$("#loadingPanel").hide();

Other than that, here is his code repeated again:

<div id="contentPanel">
page content before animated gif is to be shown
</div>
<div id="loadingPanel">
    <img id="loadingImage" alt="Loading..." src="loading.gif" />
</div>



$("#contentPanel").hide();
$("#loadingPanel").show("fast", function() {
    $("#loadingImage").attr("src", $(this).attr("src"));
});


Thanks!
Heisa
February 16, 2011

# re: Animated GIF images in hidden page elements

setTimeout did it for me. Saved me a lot of work!

Thanks!
StevenJiang
March 07, 2011

# re: Animated GIF images in hidden page elements

Guys the solution is so easy, I just figure out :), forgot about settimeout, css, stupid IE.

I have "wait.gif" and a copy called "wait2.gif".

When you submit the form, just switch to another image. You can change CSS:display to show and hide image you want.

My JS file using jQuery
================
${n}.jQuery(".loadingImage").removeClass("loadingImage").addClass("loadingImage2");

My css file
========
.loadingImage
{
width:20px; height:20px; background: url(../images/wait.gif) no-repeat center center;

}
.loadingImage2
{
width:20px; height:20px; background: url(../images/wait2.gif) no-repeat center center;

}

My html
=======
<span><div class="loadingImage">&nbsp;</div></span>

Hope it resolves the issues.
kasim
March 22, 2011

# re: Animated GIF images in hidden page elements

I have same kind of poblem, my image with animation loads and getting animated in Firefox, but not with IE. Here is the code:

<!--/*--><![CDATA[/*><!--*/
if (document.getElementById("safeForm4b").submitted.value == "false") {
        document.getElementById("safeForm4b").submitted.value = "true";
        setTimeout('document.getElementById("safeForm4b").submit()', 100);
}else{
        document.getElementById("toHide").style.display="none";
}/*-->]]>*/
.


Can you please inform me what i need to do
kasim
March 22, 2011

# re: Animated GIF images in hidden page elements

i have made as
setTimeout('document.getElementById("safeForm30").src', 100);
this displays the image but not going for the next page. It shows only animated image.
May 04, 2011

# re: Animated GIF images in hidden page elements

I agree with Arka Roy. The setTimeout() method is quick easy and it works.

Many thanks
Don
KLee
November 11, 2011

# re: Animated GIF images in hidden page elements

I'm using IE9. The concept @Gabriel mentioned back in 2007 worked for me...

In your submit, click, or whatever javascript handler function, append a querystring with a unique value to your animated image's url.

So in @Rick Strahl's original example, you'd do this...

function ShowWaitDisplay() {
   document.getElementById('MainForm').style.display='none';
   document.getElementById('WaitNote').style.display='inline';
   Img = document.getElementById('WaitImage');
   //begin my changes
   //Img.src = "images/pleasewait.gif";
   //instead of the above line, do this...
   Img.src = "images/pleasewait.gif?z=" + new Date().getTime(); //using current time as my unique value
   //end my changes
   window.scrollTo(0,0);
   return true;     
}
January 10, 2012

# re: Animated GIF images in hidden page elements

After realizing I had this issue in IE, i used the setTimeout suggestion, and that seemed to work... until i tested my application on a site with SSL. This caused the animated gif to not work in anything except Firefox. Tim Hornbrook's suggestion to use jQuery seems to have resolved this. I find it interesting however, that it seems to be essentially the same thing, just done a different way
February 08, 2012

# re: Animated GIF images in hidden page elements

Hello! I've read all of the solutions posted by now, and the only one I got to work was the one posted by Richard Marr on April 04, 2005

Just added his code after setting the visibility of the element to true.

showWaitPage =function
{
blehbleh your code
bone.elem.style.visibility = "visible";//the function ended here
document.getElementById("YourElement").innerHTML = "<img src='yourGif.gif'>";


Thanks all and hope this works for most people!
Ben S-B
April 20, 2012

# re: Animated GIF images in hidden page elements

Haha, although what has fixed the problem in IE has now caused the same problem in Safari and Chrome!

A bit of tweaking and this now correctly shows the animated gif for me in all browsers:

HTML:
<div id="veil" style="position: relative; display: block; left: -9999px;">
    <div id="progressBar">
        <img src="/images/blank.gif" id="animatedBar" />
    </div>
</div>
 
<a href="#" onclick="veilizer(); return false;">Go!</a>

Javascript:
window.onload = function() {
    setTimeout(function() {
        document.getElementById('animatedBar').setAttribute('src','/images/green-bar.gif');
    },200);
 
function veilizer() {
    document.getElementById('veil').style.left = "0";
    document.getElementById('progressBar').innerHTML = "<img src='/images/green-bar.gif' id='animatedBar' />";
    setTimeout(function( {
        document.getElementById('animatedBar').setAttribute('src','/images/green-bar.gif');
    },20);
};
Steve'O
June 21, 2012

# re: Animated GIF images in hidden page elements

Hello,

for me this approach worked(vs 2008) :
aspx page:
<asp:Button ID="Button1" runat="server" Text="Button" />
 <div id="loading1" class="Loading" style="visibility:hidden;margin-top:-12px;">
            <img src='images/LoginLoader.gif' alt="loading" />
        </div>


In Page_Load (vb):
      Button1.Attributes.Add("Onclick", String.Format("Redirect('{0}')", Button1.ClientID))




Javascript:
<script type="text/javascript">
        function Redirect(Control) {
            document.getElementById("loading1").style.visibility = 'visible';
            if (navigator.appName == 'Microsoft Internet Explorer') {
                document.getElementById("loading1").innerHTML = "<img src='images/LoginLoader.gif' />";
            }
            document.getElementById(Control).style.visibility = 'hidden';
        }
    </script>


I've tried it in latest FF, Chrome, Opera and IE 9.0.
Hope it helps.

Cheers.
Josh
December 18, 2012

# re: Animated GIF images in hidden page elements

Not setting the sorce of the image until it is needed worked for me.

Html
<div id="divCont">
      <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"
           CssClass="navButton" OnClientClick="ShowProgCont()" />
</div>
 
<div id="divProgCont" runat="server" clientidmode="Static" style="display:none;">
      Please Wait...<br />
      <img src="" alt="loading" height="50px" width="50px" id="imgLoading" />
</div>


Javascript
function ShowProgCont() {
        $get('imgLoading').src = '../images/BusySign.gif';
        $get('divProgCont').style.display = 'block';
        return false;
    }
.
Andre Rocha
June 10, 2013

# re: Animated GIF images in hidden page elements

Only, i tested if the browser is 'Microsoft Internet Explorer' and developed the code below:

Javascript
 
<script type="text/javascript">
            function progresBar(){
                var browser = navigator.appName;
                if(browser == 'Microsoft Internet Explorer'){
                    var  bar = document.getElementById('yourElementID');
                    var img = document.getElementById('yourImageElementID');
                    bar.style.display = 'inline';
                    img.src="yourImageDirectory/bigrotation2.gif";
                }else{
                    document.getElementById('yourElementID').style.display = 'inline';
                }
            }
</script>


HTML
<div class="texto" id="yourElementID" style="display: none">
     <input type="image" 
            id="yourImageElementID" 
            name="image" 
            src="imagens/estrutura/bigrotation2.gif"
            style="margin-left: 150px; margin-right:10px; position: relative;top:10px" />
    File in process. Wait...
</div>


And the .gif animation is working in all browsers.