Create a real "loading ..."?

Question

Create a real "loading ..."?

Navigation

#1 by (9 votes)
#2 by (4 votes)
#3 by (1 votes)

9

I've been researching some cool effects for a "Loading ..." But I noticed that on all sites, they use timeout to get the animation in and out of the page, so it's just a beautiful cover of some cake. So I stopped to think, timeout based on response time? I saw in Google Chrome that when I open Developer Tools, and go to the network tab, the total time 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, this 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

asked by anonymous 22.05.2015 / 21:19

3 answers

4

I have already created this in the following way. In the page header, I put all the CSS and jQuery files and in the page footer before closing the body tag I 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 example shown works as follows:

Files referenced by CSS and jQuery are loaded

When the browser starts rendering the page, the div#loading element is the first one to be created.

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

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

This would be the closest to a "real load". Another way would be to load only the javascript responsible for this "loading" and another to fetch the rest of the page via AJAX as in @Marcio's response, this would be a little closer to the "real load" but a bit more laborious, since it would have to worry a lot about what you need to look for.

22.05.2015 / 22:29

1

You can use jQuery.ajaxSetup , example:

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

Documentation: link

:)

23.05.2015 / 18:41

Is there a package management system on the Moon? How to get the parent / parent object instance in a javascript function?

score 9 · Accepted Answer

It actually works like this: The ajax request has events , one of them is completion, success in the case of jQuery. Then the process is simple. You display the image when you open the request, and hides when it is finished, in the success event. You do not have 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 correct thing is to use the complete event, because if it is used only in success and if there is an error in the request, the image is not hidden.