Анимированное фоновое изображение в скрытом ‹div› не загружается или загружается без анимации

Я потратил целый день, пытаясь создать скрипт, который при «отправке» скрывает форму и показывает скрытую с анимированным индикатором выполнения. Проблема в том, что Internet Explorer не показывает анимированные gif-изображения в скрытых элементах div. Изображения статичны. Я посетил много веб-сайтов и нашел скрипт, который использует:

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

Наконец, мой скрипт работает в Internet Explorer, Firefox, Opera, но... Google Chrome вообще не отображает изображение. Я вижу только текст div. После многих тестов я обнаружил следующее: единственный способ увидеть фоновое изображение в Google Chrome — включить это же изображение где-нибудь на странице (за пределами скрытого блока div) с размерами в 1 пиксель:

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

Это сработало, но... после этого грязного решения Microsoft Explorer по какой-то причине снова показывает изображение как статичное. Итак, мой вопрос: есть ли способ заставить Gogle Chrome показывать изображение? Спасибо. Это мой сценарий:

<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>