4

Alguns sites como Walking Dead e YouTube tem um sistema‎ que aparece em cima quando a página está carregando e aparece uma imagen em GIF ou CSS3 arrodeando no lado ou um barra de progresso. Qual o nome desse sistema ou como eu posso fazer ele?

Já pesquisei muito tentando encontrar e nada...

2

1 Resposta 1

7

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:

1
  • 2
    Muito bom, só fazer algumas modificações.
    – Lucas C.S
    Commented 8/04/2014 às 3:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .