Check if window load is false

Asked

Viewed 641 times

1

When I give the command: 

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

Works correctly, the message on the console only appears when the window has been fully loaded. But for example, how do I check that (window).load() is false?

When I use:

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

It kind of doesn’t give the command as false. Why?

javascript jquery dom

  • Can you explain why you want to do this? I have doubts because I think another cumin better

  • Miguel, I’m going to create a mini system, just to have a loading while the site is loading. I know I can create a div superimposing the entire site and hide at the end of the window load, but, I was left with this doubt, put was testing the commands on the console.log and did not return true or false results.

3 answers

4


I usually make it simple without jQuery like this:

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!');
});

The idea is to have a function that calls itself until the page has changed state. This logic allows calling domReady several times from different places. The function that is passed to domReady is called when the page has been loaded or complete.

To have a Loader just add a class to an DOM element that is removed within the function passed to domReady.

For example like:

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

  • Cool, Sergio, got it! I just have a few questions, why did you use a Function inside another one? Wasn’t just creating the domReady Function? For example: (Here it will be a little cramped, but I think you can understand if copy and paste)

  • Function domReady(cb) { var state = Document.readyState; if (state == 'Loaded' || state == 'complete') cb(); Else setTimeout(checkDomReady, 200); };

  • Sorry if I was a layman, I’m kind of "entering now" in Javascript/Jquery

  • @Lucascarvalho is to be able to call to itself guarding the cb in memory until it’s time to call.

2

Method load has the following parameters .load( url [, data ] [, complete ] )

example of functioning

$( "#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 );
  }
});

As you can see, error is equivalent to false in load, means that it was not possible to request such information. If you want to follow the process use beforeSend in a request ajax...

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

Consult Load, Ajax

1

There are two .load in Jquery. The first, which you can see here is an Event Handler for the Javascript "load" event. It is called when a component and all its subcomponents are fully loaded. That method was deprecated from Jquery 1.8 and removed from Jquery 3.0.

The other method .load, that can be seen here, is an Ajax module method responsible for loading an HTML from a server and placing the content in the component where the method was called. Before the first being deprecated, Jquery knew which method was being called according to the given parameters.

None of these methods simply return true or false as you are wanting (the first .load quoted returns a Jquery object). What can be done is to put the code you want to execute after the entire page is loaded into the function .ready():

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

Anything outside this method will be executed before the page is fully loaded.

Browser other questions tagged javascript jquery dom

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