用JavaScript點擊使gif加載器顯示

我有一個HTML輸入按鈕，它在點擊時提交一個PHP表單。以上操作的代碼如下：用JavaScript點擊使gif加載器顯示

<input class="rg_btn" name="submit" value="Register" type="submit" />

然而，當用戶點擊該按鈕，我想讓它顯示在頁面的中間3秒鐘的加載圖像（我有gif文件），那麼我希望表單實際處理。

我該怎麼做？

像什麼http://www.mega.co.nz/#pro不會當你點擊立即購買

來源

2013-10-16 James

您能否提供更多信息？在此期間正在做什麼？你希望它在三秒鐘後真正消失嗎？ – BTC

一個'onClick'事件和'setTimeout'調用。很基本的東西。 – ceejayoz

我在問題中加入了一個關於我的意思的鏈接 – James

首先將圖像添加到您的HTML，讓它被隱藏使用CSS：

<img src="3sec.gif" id="gif" style="display: none;">

然後，使用jQuery：

$('.rg_btn').submit(function() { 
    $('#gif').show(); 
    return true; 
});

另外不要忘記如果你還沒有在標題標籤之間加入jQuery它：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

來源

2013-10-16 18:05:08 Rohit

<input class="rg_btn" name="submit" value="Register" type="submit" onclick='btnClick' /> 


function btnClick() { 

    var Gif = document.createElement('div'); 

    Gif.className = "?"; 

    Gif.innerHTML = "<img src='some_img' />"; 

    document.appendChild(Gif); 


    setTimeout("btnClickfade()", 3000); 

} 

function btnClickfade() { 

    document.removeChild(document.getElementByClassName("?")); 

}

來源

2013-10-16 18:03:15 BTC

雖然你可能不想這樣做，但我猜測。你可能想要通過引用外部請求來執行btnClick（），並且在外部請求的回調中，淡入gif。 – BTC

你可以這樣做如下─

第1步：不要創建一個提交按鈕，而創建一個標準的按鈕第2步：當用戶點擊按鈕taht，呼叫功能可以讓它命名爲submitme

步驟3：

在Javascript中：功能submitme（） { //代碼所需時間顯示圖像//隱藏圖像，並提交形式 }

來源

2013-10-16 18:05:33 Tarun

對於這一點，你就必須創建的onclick火災並取消默認行爲按鈕的功能使用event.preventDefault();之後，你會設置的（提交表單）基本上附加一個div的身體，與中心加載gif（通過CSS）這將顯示3秒，你也可以有預先插入的DIV，所以你不必再追加它。

有幾件事我不明白壽，從你的問題我可以讀，你想顯示一個加載GIF 3秒，這是非常長，只有之後，你真的要開始處理表單。

對於這種情況，我強烈建議使用AJAX來透明地處理您的請求，例如，沒有頁面重新加載，沒有3秒延遲提交。

如果用戶有JS禁用，您可以使用PHP回落，其中形式會立刻提交（用戶不會希望等待3秒相信我）

這可能是最輕鬆的方法，如果你有關於如何用普通的JS實現AJAX請求的問題，請評論這個問題，我會根據你的需要編輯它。

‐ Sid

來源

2013-10-16 18:07:43 SidOfc

用JavaScript點擊使gif加載器顯示

回答

相關問題