CSS、HTML和Javascript:；“正在加载…”；微调器不'；不能使用链接onClick

我希望我的网站有一个覆盖整个网页和一个GIF动画“加载…”微调器，每当按钮（链接和提交按钮）在我的网站被点击。该网站应该作为一个iPhone网络应用（“保存到主屏幕”）-因此，我需要“window.location”（请参阅）。我不会也不会使用任何第三方库（没有jquery等）

什么是有效的：

• 覆盖适用于所有按钮
• 表单提交按钮的覆盖和GIF动画效果
• 当我单击链接时，GIF确实会出现，但是

不起作用的是什么：

• 单击链接时，GIF未设置动画。我正在使用Firefox、Internet Explorer和Chrome各自的最新版本。我通过谷歌找到的只是对“旧”邪恶ie版本的引用——但这里的情况并非如此

我的问题是:

• 如何将GIF设置为动画

就目前而言，我会相信并闭嘴

以下是我在HTML和javascript中的内容：

<div id="overlay"></div>
<div id="page">
  <a onclick="document.getElementById('overlay').style.display = 'block';
              window.location='/';
              return false;" 
     href="/" 
     title="home" 
     alt="home">
     home
  </a>
</div>

（例如，其中“spinner.gif”可以是）

---

这是一个JSFIDLE版本：

加载下一页的过程可能会中断动画。我创建了一个带有链接和微调器动画的测试页面。当我单击链接时，当浏览器加载新页面时，动画停止。您确定停止动画的不仅仅是这样的浏览器行为吗？如果从onclick中取出“window.location='/'”动画是否有效

如果您想无缝地导航到新页面，可以使用AJAX用Javascript检索HTML，并用获取的内容替换页面内容。当AJAX运行时，覆盖微调器应该可以正常工作。

您可以尝试以下方法：

  <a href="javascript:overlayFunc()" onclick="overlayFunc()" title="home" alt="home">
     home
  </a>


function overlayFunc(){
    document.getElementById('overlay').style.display = 'block';
    window.setTimeout('window.location="/"', 1500);

    return false;
}

函数overlayFunc（）{
document.getElementById（'overlay'）.style.display='block'；
window.setTimeout（'window.location=“/”，1500）；
返回false；
}

您显示的图像URL在images文件夹中有

gif

，而您通过使用

/

删除窗口在

根目录中访问它。位置位使其工作。可能是计时器问题，所以在它转到指定的URL或其他东西之前，请延迟一段时间：Billy：该网站应该作为iPhone web应用（“保存到主屏幕”）-因此，我需要“window.location”。别在意路，Сааааааааа，但谢谢分享想法！我需要更改页面-这就是链接的用途。我弄错了吗？我试着做些改变。你的代码对我有效，我正在使用Chrome，所以我做了一些更改来延迟window.location功能。非常感谢你的努力，red_alert。这确实会显示一个动画GIF，但它也会在页面加载开始时停止动画。另外：页面加载延迟了一秒半…好的，如果这是你需要的，那就太好了。你现在可以接受答案并投弃权票。谢谢你。。。这不是我需要的。页面加载不应延迟，动画应一直运行到页面加载为止。对不起，如果我不清楚的话。导航到一个新页面是一个非常标准的操作，任何互联网用户都习惯了。在这种情况下不使用覆盖层会更有意义。说得好，赛斯！由于它主要是一个移动网站，加载时间有时很长，我希望访问者看到实际应用的点击，我希望他们在通话期间不要点击我网站上的任何其他内容。我同意AJAX的观点，但这不是初始版本。。。
  <a href="javascript:overlayFunc()" onclick="overlayFunc()" title="home" alt="home">
     home
  </a>


function overlayFunc(){
    document.getElementById('overlay').style.display = 'block';
    window.setTimeout('window.location="/"', 1500);

    return false;
}