No exemplo abaixo, ao carregar a página home.html
, ela vai executar o processo do Ajax. O ajaxStart
(que inicia o processo do Ajax) e o ajaxComplete
(quando termina o Ajax) são os controles de todos os eventos que iniciam e terminam o processo. A divLoading
é acionada no ajaxStart
e no ajaxComplete
eu sumo com ela, dando aquele efeito que você deseja.
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efeito na Página e Todas Requisições Ajax</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Load(View){
$("#carregar").load(View);
};
$(document).ready(function(e) {
$("#a1").click(function(e) {
Load('page1.html');
});
//CHAMADO NO INICIO DA PÁGINA
Load('page1.html');
});
//EFEITO ESPERADO ...
$(document).ajaxStart(function() {
$("#divLoading").fadeIn(0);
});
$(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
$("#divLoading").fadeOut(1250);
});
</script>
</head>
<body>
<div style="display:none;" id="divLoading">
<img src="ajax.gif" border="0" />
</div>
<div>
<a href="javascript:" id="a1">Abrir</a>
</div>
<div id="carregar"></div>
</body>
</html>
page1.html
<h1>Pagina Link 1 - Page.html</h1>
Referências: