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

Question

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

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

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

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

Answer 1

Попробуйте:

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

Сам большой G использует эту технику для предварительной загрузки поиска DNS на своей домашней странице.

---

UPDATE Из-за ошеломляющего -1 я получил ... Мне нужно объяснить, почему вышеупомянутое может сработать тем, кто понизил голос, когда они не понимают возможностей данного решения.

Google Chrome вполне может «разумно» выбирать, какие ресурсы загружать, анализируя, действительно ли они будут отображаться на странице (аналогично тому, как браузеры загружают не все background-image: url ( image * 1012) *) в файле CSS). Если это так, то также может быть верно следующее: Если время, в течение которого изображение «load.gif» предназначено для отображения, является МЕНЬШЕ, чем время, которое требуется для загрузки изображения, то оно будет выглядеть так, как будто изображение вообще не отображается (даже если оно только загружается).

За счет предварительной загрузки изображения с помощью '(новое изображение) .src = "image.gif";' При подходе мы гарантируем, что изображение будет готово в кеше браузера и, таким образом, сразу же будет доступно при необходимости.

Что касается того, почему Internet Exploder показывает только один кадр, я не уверен. На странице должны присутствовать другие переменные, вызывающие такое поведение (долго выполняющийся скрипт, ограничить число циклов, закодированных в самом GIF,?).