Create a real "loading..."?

Asked

Viewed 260 times

9

I’ve been researching some legal effects for a status of "Loading..." But I realized that on all the sites, they use timeout so that the animation goes in and out of the page, being then, just a beautiful frosting of any cake. So I stopped to think, I would have like to do this timeout time-based sponse ? I saw in Google Chrome that when opening the Developer Tools, and go to the tab network appears the total time that this data exchange took to be returned to the user who is on the site.

So I ask you to imagine any data exchange with jQuery, Ajax or any other and that while this data exchange is done, it goes into effect:

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

Is this possible? What is the name of this process?

javascript jquery

  • Do you want that image to be shown whenever external content is searched? do you have ajax on the site? it would be easier to limit this to ajax, I don’t see how to know if the browser is receiving data...

3 answers

9


It actually works like this: The ajax request has events, one of them is the conclusion, success in the case of jQuery. Then the process becomes simple. You showcase the image when opening the request, and hide when it is finished, in the Success event. You do not need to calculate any time. Example in 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();

To be honest, the right thing to do is to wear it to the event complete, because if used only in success and if there is an error in the request, the image is not hidden.

4

I have already created it as follows. In the page header, I place all CSS files and jQuery and the page footer before closing the tag body add the rest of the scripts and an embedded script, as in the example:

<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>

The shown example works as follows:

  1. The CSS and jQuery reference files are loaded
  2. When the browser starts rendering the page, the element div#loading is the first to be created.

It should contain a CSS class that sits on the rest of the page, such as a position:fixed; z-index: 10000; or other to your liking. While the page is being mounted it is being displayed.

  1. When the browser finishes rendering the page, the event onload comes into action and the method jQuery(document).ready(...) is executed, and within that method we hide the div#loading

That would be the closest to a "real loading". Another way would be to load only the javascript responsible for this "loading" and another to search the rest of the page via AJAX as in the @Marcio reply, this would be a little closer to "loading real", but a little more laborious, since you would have to worry enough about what you need to seek.

2

You can use the jQuery.ajaxSetup, example:

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

Documentation: https://api.jquery.com/jquery.ajaxsetup/

:)

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.