javascript - 隐藏的 <div> 中的动画背景图像不会加载或加载不是动画

Question

我花了一整天的时间尝试制作一个脚本，该脚本在“提交”时隐藏表单并显示隐藏的动画进度条。问题是 Internet Explorer 不会在隐藏的 div 中显示动画 gif 图像。图像是静态的。我访问了很多网站并找到了一个脚本，它使用:

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 查找。

---

更新 由于令人难以置信的 -1，我收到了......我需要解释为什么上面的内容可能适用于当他们不理解给定解决方案的可能性时投票的 numbskulls。

Google Chrome 很可能通过分析资源是否实际显示在页面上来“智能地”选择要下载的资源(类似于浏览器不下载每个背景图像的方式:url(图像) 在 CSS 文件中)。如果这是真的，那么以下也可能是真的: 如果“load.gif”图像的预期显示时间少于下载图像所需的时间，那么它看起来就像根本没有显示图像(即使它只是被下载)。

通过使用“(new Image).src ="image.gif";”预加载图像我们确保图像在浏览器的缓存中准备就绪，因此在需要时立即可用。

至于为什么 Internet Exploder 只显示一帧，我不确定。页面中必须有其他变量导致此行为(长时间运行的脚本，限制 GIF 本身编码的循环次数，？)。