Remove Download after page fully load

Question

I have a custom Clicker that appears on the screen while loading. When I’m done I need this Clicker to disappear, so there’s nothing wrong. The problem is that the page is still doing some processes with jQuery and the div of the Loader disappears, giving the effect it apparently carried, but not really.

The browser does not appear loading, but behind it is still running some processes with jQuery. I wish that when I really upload everything, be it links or codes there yes it would use the code I have below, but I am using it and it is not 100% as I need:

$(window).on('load', function(){

//... Retiro a class da DIV do nosso Loader

});

Answer 1

Normally, you can use window.onload, but you may notice that recent browsers do not trigger window.onload when you use the buttons/history forwards or backwards.

Some people suggest strange "things" to get around this problem, for some reason there are still people who use setIntervale and other strange hacks.

• The documentation strictly suggests:

  window.onload = function () { alert("Carregou!") }

• There are alternatives

  Event.observe(window, 'load', function(event) { // feito });

• APIS

But between DOMContentLoaded/load and document.readyState, I think there are some features that ensure that the document is loaded:

`HTMLDocument.prototype.ready = function () {
    return new Promise(function(resolve, reject) {
        if (document.readyState === 'complete') {
            resolve(document);
        } else {
            document.addEventListener('DOMContentLoaded', function() {
            resolve(document);
        });
                    }
    });
}
document.ready().then(...);`

Answer 2

Whatever the language, jQuery will inform you that your page has been completed when the DOM is loaded. As you perform post-loading asynchronous DOM operations, I suggest you place the code of your Oader withdrawal after the last dynamic asynchronous action, like:

$.getJSON("[sua-ultima-carga].json", function(data){
    // Sua lógica de carregamento
    // Retira o loader
});

Another possibility, since you have multiple asynchronous loads is to use WHEN to pull the load after all:

$.when(carregamento1, carregamento2).then(
  function(resultado1, resultado2) {
    // retira o loader depois que os carregamentos 1 e 2 terminarem
  }, 
  function(Erro) {
    // qualquer carregamento que der erro dispara essa function com o resultado do erro onde você deve retirar o loader para tratar o erro
  }
});