Javascript 隐藏的动画背景图像<；部门>；不'；t加载或加载未设置动画

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

document.getElementById（id.style.backgroundImage='url（/images/load.gif）'

最后，我的脚本可以在Internet Explorer、Firefox和Opera中使用，但是。。。谷歌浏览器根本不显示图像。我只看到div文本。经过多次测试，我发现了以下几点：在Google Chrome中查看背景图像的唯一方法是在页面的某个位置（隐藏div之外）包含相同的图像，尺寸为1px：

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

这确实奏效了，但是。。。在这个肮脏的解决方案之后，由于某种原因，Microsoft Explorer再次将图像显示为静态。所以，我的问题是：有没有办法强迫眼镜铬显示图像？谢谢这是我的剧本：

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

函数版本（id，elementId）{
if（document.getElementById（'espera'）.style.visibility==“visible”）{
返回false；
}否则{
var esplit=document.forms[0]['userfile'].value.split（“.”）；
ext=esplit[esplit.length-1]；
if（document.forms[0]['userfile'].value=''）{
警报（“请选择一个文件”）；
返回false；
}否则{
if（（ext.toLowerCase（）=='jpg'））{
document.getElementById（id）.style.position='absolute'；
document.getElementById（id）.style.display='inline'；
document.getElementById（id）.style.visibility=“可见”；
document.getElementById（id.style.backgroundImage='url（/images/load.gif）'；
document.getElementById（id）.style.height=“100px”；
document.getElementById（id）.style.backgroundColor='#f3'；
document.getElementById（id）.style.backgroundRepeat=“无重复”；
document.getElementById（id）.style.backgroundPosition=“50%50%”；
var元素；
如果（全部文件）
element=document.all[elementId]；
else if（document.getElementById）
element=document.getElementById（elementId）；
if（元素和元素样式）
element.style.display='none'；
返回true；
}否则{
警报（“这不是jpg文件”）；
返回false；
}
}
}
}  
文件（jpg）






请稍候…

试试：

大G本身使用这种技术在其主页上预加载DNS查找

---

更新 由于我收到了令人难以置信的-1…我需要解释一下，为什么上面提到的可能适用于那些不了解给定解决方案的可能性而投反对票的人

Google Chrome很可能“智能地”选择下载哪些资源，通过分析这些资源是否真的会显示在页面上（类似于浏览器不下载每个背景图像的方式：CSS文件中的url（图像））。如果这是真的，则以下情况也可能是真的： 如果打算显示“load.gif”图像的时间少于下载图像所需的时间，则图像将显示为根本没有显示（即使只是下载）

通过使用“（new image）.src=“image.gif”；”预加载图像方法我们确保图像在浏览器缓存中准备就绪，从而在需要时立即可用

---

至于为什么互联网爆炸只是显示一个框架，我不确定。页面中必须存在导致此行为的其他变量（长时间运行的脚本，限制GIF本身编码的循环数）。

-1请阅读问题。他没有预加载问题。图像根本没有在Chrome中显示。请尽快在您的页面上运行此操作以开始加载图像（加载到屏幕外缓冲区和浏览器缓存中）。谢谢David Murdoch。不幸的是，这并不能解决问题-在Google Chrome中显示图像，但在Internet Explorer中使图像保持静态：（刚刚发现，如果我包括（新图像），所有浏览器中的一切都可以正常工作。src=“/images/load.gif”在一个不同的页面，在提交表单之前由用户访问。如果没有其他的解决方案，我会把它包含在登录页面中。不是最好的解决方案，但是它是有效的。@ Guange。你的脚本中有很多性能问题。你应该考虑重构。还有“语言=”JavaScript。不需要。哦，如果你想+1我那就太好了！：-）也许是时候让IE6停下来了。这在IE7+上也会发生吗？保罗，这是IE7。我读过这篇长文章：看来这个问题没有解决办法。

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