An animated background image in a hidden <div> does not load or does not load non-animated

Question

I spent the whole day trying to make a script that on "submit" hides the form and shows a hidden one with an animated progress bar. The problem is that Internet Explorer does not show animated gifs in hidden divs. Images are static. I visited a lot of websites and found a script that uses:

document.getElementById (id) .style.backgroundImage = 'url (/images/load.gif)';

Finally, my script works in Internet Explorer, Firefox, Opera, but ... Google Chrome does not display the image at all. I see only div text. After many tests, I found the following: the only way to see the background image in Google Chrome is to include the same image somewhere on the page (outside the hidden div) with 1px sizes:

<img src="/images/load.gif" width="1" heigh="1" /> 

This did the trick, but ... after this dirty decision, Microsoft Explorer for some reason shows the image again as static. So my question is: is there a way to get Google Google to show the image? Thank you This is my script:

 <script language="JavaScript" type="text/javascript"> function ver (id, elementId){ if (document.getElementById('espera').style.visibility == "visible") { return false; }else{ var esplit = document.forms[0]['userfile'].value.split("."); ext = esplit[esplit.length-1]; if (document.forms[0]['userfile'].value == '') { alert('Please select a file'); return false; }else{ if ((ext.toLowerCase() == 'jpg')) { document.getElementById(id).style.position = 'absolute'; document.getElementById(id).style.display = 'inline'; document.getElementById(id).style.visibility = "visible"; document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)'; document.getElementById(id).style.height = "100px"; document.getElementById(id).style.backgroundColor = '#f3f3f3'; document.getElementById(id).style.backgroundRepeat = "no-repeat"; document.getElementById(id).style.backgroundPosition = "50% 50%"; var element; if (document.all) element = document.all[elementId]; else if (document.getElementById) element = document.getElementById(elementId); if (element && element.style) element.style.display = 'none'; return true; }else{ alert('This is not a jpg file'); return false; } } } } </script> <div id="frmDiv"> <form enctype="multipart/form-data" action="/upload.php" method="post" name="upload3" onsubmit="return ver('espera','frmDiv');"> <input type="hidden" name="max_file_size" value="4194304" /> <table border="0" cellspacing="1" cellpadding="2" width="100%"> <tr bgcolor="#f5f5f5"> <td>File (jpg)</td> <td> <input type="file" name="userfile" class="upf" /></td></tr> <tr bgcolor="#f5f5f5"> <td>&nbsp;</td> <td> <input class="upf2" type="submit" name="add" value="Upload" /> </td></tr></table></form> </div> <div id="espera" style="display:none;text-align:center;float:left;width:753px;">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br /> &nbsp;<br />Please wait...<br />&nbsp; </div> 

Answer 1

Try:

 (new Image).src="/images/load.gif"; 

Big G itself uses this method to preload DNS queries on its home page.

---

UPDATE Due to the stunned -1 I got ... I need to explain why the above can work on numbskulls, that downvote when they do not understand the possibilities of this solution.

Google Chrome may very well “wisely” choose which resources to load, analyzing whether they will actually be displayed on the page (just like browsers do not load every background image: url (image) in the CSS file). If so, the following may be true: If the image time "load.gif" is intended to be displayed, it is LESS than the time it takes to load the image and it will look as if the image is not displayed at all (even if it is just loading).

By preloading the image with '(new image) .src = "image.gif";' we guarantee that the image will be ready in the browser’s cache and thus will be immediately available when necessary.

As for why Internet Exploder shows only one frame, I'm not sure. There should be other variables on the page causing this behavior (long script, limiting the number of loops encoded in the GIF itself ,?).