頁面加載時顯示AJAX加載器

你好我很新的JavaScript，不知道如何使用它。頁面加載時顯示AJAX加載器

我想AJAX加載器加載網頁時出現，並加載完成後，我想裝載機dissapear。任何人都可以發佈我的代碼嗎？

2012-02-09 Sandro Vardiashvili

什麼是沿着加載完整的描述？你的意思是一個AJAX加載器？ – Jivings 2012-02-09 08:52:47

AJAX加載欄http://www.ajaxload.info/ – 2012-02-09 08:53:55

主要想法是，您將例如一個隱藏的動畫GIF放到頁面上。當ajax請求開始時，你顯示圖像，當它完成後，你再次隱藏圖像...試試這種方式...有類似的問題已經有很多答案..看看[那個]（http://stackoverflow.com/a/1305304/617996）一個例子.... – PrimosK 2012-02-09 08:59:20

通常這是通過在內容頂部顯示/隱藏一個或多個div完成的。你可以從http://www.ajaxload.info/得到一個花式加載gif來幫助你入門。然後，你要放置一個DIV您的網頁上：

<div id="loading"> 
    <p><img src="loading.gif" /> Please Wait</p> 
</div>

你會想這個隱藏在默認情況下，所以你需要添加這個CSS：

#loading { display:none; }

您也想要設置的顯示器這也：

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; 
     background-image:url("transparentbg.png"); }

文件transparentbg.png將是一個25×25的黑色PNG設置爲約80％不透明。接下來，您將需要一種方法使用jQuery來顯示和隱藏這一點：

showLoading(); 
$.post("data.php", {var:"foo"}, function(results){ 
    $("content").append(results); 
    hideLoading(); 
});

來源

2012-02-09 08:54:39 Frankline

非常感謝你！我得到了點 – 2012-02-09 08:56:09

@SandroVardiashvili那麼你或許應該看看http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – 2012-02-09 09:05:31

您可以顯示圖像，例如this，只要您進行Ajax調用，然後在您收到來自ajax調用的響應時隱藏圖像。

來源

2012-02-09 08:53:51

謝謝，但你可以發佈我的代碼嗎？ :( – 2012-02-09 08:54:33

HTML：

function showLoading() { 
    $("#loading").show(); 
} 

function hideLoading() { 
    $("#loading").hide(); 
}

現在，當你需要做類似查詢外部頁的數據，你可以使用這個

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

的javascript：

$(function() { 
    $(".changepass").click(function() { 
     $("#dvloader").show(); 
     $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); 
     return false; 
    }); 
});

來源

2012-02-09 08:55:04 mgraph

https://preloaders.net/en/ajax_loader_script在這裏你可以找到與GIF，SVG裝載機動畫，甚至APNG格式

來源

2017-03-23 08:27:55

頁面加載時顯示AJAX加載器

回答

相關問題