Criar um “carregando…” real? – javascript jquery

6 Dezembro, 2018 admin 0 Comments javascript, jquery

Pergunta:

Andei pesquisando uns efeitos legais para um status de “Carregando…”
Porém percebi que em todos os sites, eles usam timeout para que a animação entre e saia da página, sendo então, só uma cobertura bonita de um bolo qualquer.Então eu parei para pensar, teria como fazer esse timeout baseado no tempo de response ? Vi no Google Chrome que ao abrir as Ferramentas de desenvolvedor, e ir na aba network aparece o tempo total que essa troca de dados levou para ser retornada ao usuário que está no site.

Então peço que imaginem qualquer troca de dados com jQuery, Ajax ou qualquer outro e que enquanto essa troca de dados é feita, isto entra em vigor:

$('#elementoqualquer').prepend('<img src="/img/ajax-loader.gif" align="absmiddle">');

Isto é possível? Qual o nome desse processo?

Autor da pergunta Kevin mtk

DontVoteMeDown

Na verdade funciona assim: A requisição ajax tem eventos, um deles é o de conclusão, success no caso do jQuery. Então o processo fica simples. Você mostra a imagem quando abrir a requisição, e esconde quando ela terminar, no evento success. Não precisa calcular tempo nenhum. Exemplo em jQuery:

function IniciarRequisicao() {
    // Mostra imagem na chamada da requisição
    $(".img-carregando").show();

    $.ajax({
        url: "endpoint.php",
        success: function() {
            // Fim da requição
            $(".img-carregando").hide();
        }
    });
}

IniciarRequisicao();

Pra ser sincero o correto é usar no evento complete, pois se usada apenas no success e se houver um erro na requisição, a imagem não é oculta.

Já criei isso da seguinte maneira. No cabeçalho da página, coloco todos os arquivos de CSS e o jQuery e no rodapé da página antes do fechamento da tag body adiciono o restante dos scripts e um script incorporado, como no exemplo:

<html>
<head>
    <meta charset="UTF-8">
    <title>Exemplo</title>
    <link rel="stylesheet" type="text/css" href="./css/estilos.css">
    <link rel="stylesheet" type="text/css" href="./css/estilos1.css">
    <link rel="stylesheet" type="text/css" href="./css/estilos2.css">
    <link rel="stylesheet" type="text/css" href="./css/estilos3.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
    <div id="loading"><img src="./img/loading.gif" alt="Carregando..."></div>
    <div id="conteudo">
        <!-- Restante do conteúdo da página -->
    </div>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#loading').hide('fade');
        });
    </script>
    <script type="text/javascript" src="./js/script1.js"></script>
    <script type="text/javascript" src="./js/script2.js"></script>
    <script type="text/javascript" src="./js/script3.js"></script>
    <script type="text/javascript" src="./js/script4.js"></script>
    <script type="text/javascript" src="./js/script5.js"></script>
</body>
</html>

O exemplo demonstrado funciona da seguinte maneira:

É carregado os arquivos referênte ao CSS e o jQuery
Quando o navegador começa a renderizar a página, o elemento div#loading é o primeiro a ser criado.

_{Ele deve conter uma classe CSS que fique sobre o restante da página, como um position:fixed; z-index: 10000; ou outro a seu gosto. Enquanto a página está sendo montada ele está sendo exibido.}

Quando o browser termina de renderizar a página, o evento onload entra em ação e o método jQuery(document).ready(...) é executado, e dentro desse método ocultamos o div#loading

Isso seria o mais próximo à um “carregando real”. Outra forma seria carregar apenas apenas o javascript responsável por esse “carregando” e um outro para buscar o restante da página via AJAX como na resposta do @Marcio, essa seria um pouco mais próximo ao “carregando real”, porém um pouco mais trabalhoso, já que teria que se preocupar bastante com o que você precisa buscar.

Pode se usar o jQuery.ajaxSetup, exemplo:

jQuery.ajaxSetup({
    complete: function(){
       //fechar o feedback ao usuário
    },
    beforeSend: function(){
        //mostrar o feedback ao usuário
    }
});

Documentação: https://api.jquery.com/jquery.ajaxsetup/

🙂

Fonte