Remove loader after the page has fully loaded

Question

Remove loader after the page has fully loaded

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I have a custom loader that appears on the screen while loading. When I finish I need this loader to disappear, so far so good. The problem is that the page is still doing some processes with jQuery and the loader div disappears, giving the effect it apparently loaded, but not really.

The browser does not appear loading, but behind it is still running some processes with jQuery. I want it when I actually load everything, be it links or codes, yes it would use the code I have below, but I'm using it and it's not 100% accurate:

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

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

});

javascript jquery

asked by anonymous 11.12.2016 / 15:25

2 answers

Select radiobuttons of different values WebService Error PHP + Android

score 0 · Answer 1

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

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

The documentation strongly 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 will 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(...);'

score 0 · Answer 2

Whatever the language, jQuery will report that your page has completed when the DOM loads. As you perform asynchronous operations post-loading the DOM, I suggest you put the code from your loader's withdrawal after the last dynamic asynchronous action, type:

$.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 remove the load after the completion of 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
  }
});