CSS，HTML和Javascript：“正在加載...”微調器不適用於鏈接onClick

Question

我希望我的網站可以覆蓋整個網頁，並且只要我的網站中的按鈕（鏈接和提交按鈕）被單擊，就可以使用GIF動畫的“正在加載...”微調器。 該網站應作為iPhone Web應用程序工作（“保存到主屏幕”）-因此，我需要“ window.location”（請參閱Oskars 評論 ）。 我不會也不會使用任何第三方庫（沒有jquery等）。

什么有效：

• 覆蓋層適用於所有按鈕
• 表格提交按鈕的疊加和GIF動畫
• 當我單擊鏈接時，GIF確實出現了，但是...

什么不工作：

• 單擊鏈接時，GIF 沒有動畫 。 我正在使用各自最新版本的Firefox，Internet Explorer和Chrome。 我通過google找到的所有內容都是對“舊的”邪惡（即版本）的引用-但這不是事實。

我對你的問題：

• 如何獲取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/

Answer 1

加載下一頁的過程可能會中斷動畫。 我創建了一個包含鏈接和微調器動畫的測試頁。 當我單擊鏈接時，動畫在瀏覽器加載新頁面時停止。 您確定停止動畫的不僅僅是瀏覽器行為嗎？ 如果您從onclick中移除“ window.location ='/'”，動畫是否可以正常工作？

如果要無縫導航到新頁面，則可以使用AJAX使用Javascript檢索HTML，然后用獲取的內容替換頁面的內容。 AJAX運行時，疊加微調器應該可以正常工作。

Answer 2

您可以嘗試以下方法：

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