1

Quando eu dou o comando:

$(window).load(function(){
    console.log('Site totalmente carregado!');
});

Funciona corretamente, a mensagem no console so aparece quando a janela foi totalmente carregada. Mas por exemplo, como verifico se esse (window).load() é false?

Quando utilizo:

while(!$(window).load()){
    console.log('Carregando...');
}

Ele meio que não da o comando como false. Por que?

2
  • Podes explicar porque queres fazer isso? Tenho dúvidas pois acho que pode outro cominho melhor
    – Miguel
    Commented 9/10/2017 às 12:27
  • Miguel, vou criar um mini sistema, somente pra ter um loading enquanto o site está carregando. Sei que posso criar um div sobrepondo todo o site e esconder no final do window load, mas, fiquei com essa dúvida, pôs estava testando os comando no console.log e não me retornaram resultados de true ou false. Commented 9/10/2017 às 12:30

3 Respostas 3

4

Eu costumo fazer de maneira simples sem jQuery assim:

function domReady(cb) {
  (function checkDomReady() {
    var state = document.readyState;
    if (state == 'loaded' || state == 'complete') cb();
    else setTimeout(checkDomReady, 200);
  })();
};

domReady(function() {
  console.log('a página já carregou!');
});

A ideia é ter uma função que se chama a si própria até a página ter mudado de estado. Esta lógica permite chamar domReady várias vezes de sítios diferentes. A função que for passada a domReady é chamada quando a página tiver com estado loaded ou complete.

Para teres um loader é só adicionares uma classe a um elemento do DOM que seja retirada dentro da função passada a domReady.

Por exemplo assim:

document.body.classList.add('a-carregar');

setTimeout(() => {
  document.body.classList.remove('a-carregar');
}, 3000);
body.a-carregar {
  background-color: rgba(0, 0, 0, .4);
  pointer-events: none;
}

4
  • Maneiro, Sergio, entendi! So tenho algumas dúvidas, por que você usou uma function dentro de outra? Não era somente criar a function domReady? Por exemplo: (Aqui vai ficar meio embolado, mas acho que da pra entender se copiar e colar) Commented 9/10/2017 às 12:47
  • function domReady(cb) { var state = document.readyState; if (state == 'loaded' || state == 'complete') cb(); else setTimeout(checkDomReady, 200); }; Commented 9/10/2017 às 12:47
  • Desculpa se fui leigo, estou meio que "entrando agora" em JavaScript/JQuery Commented 9/10/2017 às 12:48
  • @LucasCarvalho é para poder ir chamando a sí próprio guardando o cb na memória até ser altura de chamar.
    – Sergio
    Commented 9/10/2017 às 12:55
2

Método load possui os seguintes parâmetros .load( url [, data ] [, complete ] )

exemplo de funcionamento

$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Ocorreu o seguinte erro ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});

Como pode ver, error é equivalente a false em load, significa que não foi possível requisitar tal informação. Caso queira acompanhar o processo use beforeSend em uma requisição ajax...

$.ajax({
    url: url,
    dataType: "json",
    beforeSend: function(){
        $('.loading').html('Carregando...');
    }
});

Consulte Load, Ajax

1

Existem dois .load no JQuery. O primeiro, que você pode ver aqui é um event handler para o evento "load" do JavaScript. Ele é chamado quando um componente e todos seus subcomponentes forem carregados totalmente. Esse método foi deprecated a partir do JQuery 1.8 e removido a partir do JQuery 3.0.

O outro método .load, que pode ser visto aqui, é um método do módulo Ajax responsável por carregar um HTML de um servidor e colocar o conteúdo no componente onde foi chamado o método. Antes do primeiro ser deprecated, o JQuery sabia qual método estava sendo chamado de acordo com os parâmetros informados.

Nenhum desses métodos retornam simplesmente true ou false como você está querendo (o primeiro .load citado retorna um objeto JQuery). O que pode ser feito é colocar o código que você quer executar após toda a página ser carregada dentro da função .ready():

$(document).ready(function(){
  // fazer alguma coisa
});

Tudo que estiver fora desse método será executado antes da página ser totalmente carregada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .