Animated background image in a hidden <div> doesn't load or loads not animated
- by Guanche
Hello, I have spent the whole day trying to make a script which on "submit" hides the form and shows hidden with animated progress bar. The problem is that Internet Explorer doesn't show animated gif images in hidden divs. The images are static. I visited many websites and found a script which uses:
document.getElementById(id).style.backgroundImage = 'url(/images/load.gif)';
Finally, my script works in Internet Explorer, Firefox, Opera but... Google Chrome doesn't display the image at all. I see only div text. After many tests I discovered the following: the only way to see the background image in Google Chrome is to include the same image somewhere in the page (outside of hidden div) with 1px dimensions:
<img src="/images/load.gif" width="1" heigh="1" />
This did the trick but... after this dirty solution Microsoft Explorer for some reason shows the image as static again. So, my question is: is there any way how to force Gogle Chrome to show the image? Thanks. 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> </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;"> <br /> <br /> <br /> <br />
<br />Please wait...<br />
</div>
