Open tab after loading

Asked

Viewed 2,929 times

2

I am thinking of doing this using jQuery and I used some methods already available on the internet but they are not working. I tried to modify it more I think I’m doing it the wrong way.

What I want to do: the page should open after fully loading, so that when opening any page have all the content already available after loading.

The code:

  body{overflow-x:hidden;overflow-y:hidden;}

    <div id="bloquear" style="position:absolute;top:0;left:0;width:100%;height:100%; background:#333;"></div>


    function liberar(){
        document.getElementById('bloquear').style.display='none';
        document.body.style.overflow='scroll';
    }
<body onload="liberar">
<div id="bloquear" style="position:absolute;top:0;left:0;width:100%;height:100%; background:#FFFFF;"></div>
javascript jquery html css

  • I can’t understand what "it" is you’re trying to do.

  • @bfavaretto sorry if I did not explain in the correct way, what I am wanting to do: the page should open after fully loading, so that when opening any page have all the content already available after its loading.

  • the flash, please prefer to edit the question instead of clarify in the comments.

  • @brasofilo ok, sorry.

2 answers

2

Here is a late reply because the accepted answer does not explain what the problem was in your code and adds jQuery when the solution is not necessarily this.

There are some problems with your code:

The first is that CSS and Javascript need HTML tags for the browser to be able to interpret this code as what it is and not HTML. I mean, instead of this piece:

body{overflow-x:hidden;overflow-y:hidden;}

<div id="bloquear" style="position:absolute;top:0;left:0;width:100%;height:100%; background:#333;"></div>

function liberar(){
    document.getElementById('bloquear').style.display='none';
    document.body.style.overflow='scroll';
}
<body onload="liberar">

should look like this: (with javascript inside tags <script>)

<style>
body{overflow-x:hidden;overflow-y:hidden;}
</style>

<div id="bloquear" style="position:absolute;top:0;left:0;width:100%;height:100%; background:#333;"></div>
<script>
function liberar(){
    document.getElementById('bloquear').style.display='none';
    document.body.style.overflow='scroll';
}
</script>
<body onload="liberar">

Another problem is that the declaration of the beginning of the body ocerre after HTML has already appeared on the page. This is invalid. Tag <body> tells the browser that there gets the page body and there can be HTML outside the body. So this line:

<div id="bloquear" style="position:absolute;top:0;left:0;width:100%;height:100%; background:#333;"></div>

should be inserted after the tag <body onload="liberar">

Another problem is that the release function will not be racing if it does not add () at the end. That is to say <body onload="liberar()">. Take a look here (http://jsfiddle.net/sFms7/) test remove the () and press "Run", you will see that the function does not run. This is because Javascript within HTML behaves differently. This pointer to the function will only be read/Parsed when the onload be called.

The last problem is the positioning of the function liberar. Here are two options. Or put inside the tag <head> (missing in your code) along with the <style>, or put it at the end of the body, just before </body>. Since it is only a function statement is indifferent where it puts, as long as it has the correct HTML tags.

How your code should be (online example): http://jsfiddle.net/8Tj23/

(test withdraw () to see the code fail to hide the div)

  • 1

    Okay man, thank you.

1


Correcting your code:

<style  type="text/css">
  body {overflow: hidden;}
  #bloquear {position:absolute;top:0;left:0;width:100%;height:100%; background:#333;}
  #conteudo {display: none;)
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

     $(document).ready(function() {
          $('#bloquear').hide();
          $('#conteudo').show();
     });

</script>

<div id="bloquear">AQUI O QUE APARECE ENQUANTO NÃO CARREGOU</div>

<div id="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>

It only loads the page after loading all scripts (less images). He’s not very functional...

You can also use load instead of ready!

  • I put another example...but it depends on how his CSS is, the example he put is very confusing..

  • @user3230262 here is a page using this loading method: http://codepen.io/flashpremium/pen/DHctJ

  • @theflash did the fix on your code, hopefully that’s it...

  • thanks, I just didn’t understand a point if I’m with a single div "wrapper" that would be the father div, what should I do to hide and demonstrate all content just after loading a page, all at once?

  • you need to create the div that will appear while the page is not loaded and let the div "wrapper" with display:None for it to appear only when the page is loaded, is exactly the answer I posted, only you need to modify to your preferences, remembering that it does not wait for the images to load, only the scripts...

  • this clarifies my doubt. thank you.

Show 1 more comment

Browser other questions tagged javascript jquery html css

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