0

我希望我的网站在我的网站中的按钮（链接和提交按钮）被点击时覆盖整个网页和一个 GIF 动画“加载...”微调器。该网站应该作为 iPhone 网络应用程序工作（“保存到主屏幕”） - 因此，我需要“window.location”（参见Oskars 评论）。我不会也不会使用任何第三方库（没有 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>

这是我在 CSS 中的内容：

div#page {
    position:absolute;
    top: 0px;
    left: 0px;
    width:100%;
}
div#overlay {
    display: none;
    z-index: 10000;
    background: #000;
    position: fixed;
    width: 100%;
    opacity: .6;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url("spinner.gif");
    background-repeat:no-repeat;
    background-position:center;
}

（例如，“spinner.gif”可以是http://www.melabev.org/images/spinner.gif）

这是一个 jsfiddle 版本：http: //jsfiddle.net/87paH/2/

4

2 回答 2

0

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

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

于 2013-02-26T15:53:10.340 回答
0

你可以试试这个：

  <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;
}
于 2013-02-26T15:55:06.977 回答