Open page after upload

Navigation
2

I'm thinking of doing this using jQuery and I have 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 loading fully, so that when opening a page any 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>
    
asked by anonymous 01.06.2014 / 03:14

2 answers

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><divid="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 the scripts (fewer images). It is not very functional ...

You can also use load instead of ready!

    
01.06.2014 / 03:26
2

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

You have some problems with your code:

The first is that CSS and JavaScript need HTML tags so the browser can interpret this code as what it is and not HTML. That is, 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 start of body statement is closed after HTML has already appeared on the page. This is invalid. The <body> tag tells the browser that the body of the page starts there and there can be no HTML outside the body. So this line: 

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

must be inserted after tag <body onload="liberar">

Another problem is that the release function will not be run if you do not add () to the end. That is <body onload="liberar()"> . Take a look here ( link ) test remove the () and press "Run", you will see that the function does not run. This is because JavaScript inside HTML behaves differently. This pointer to the function will only be read / parsed when onload is called.

The last problem is the positioning of the liberar function. Here are two options. Or place it inside the <head> (missing in your code) tag along with <style> , or place it at the end of body , just before </body> . Since it's just a function declaration it's no matter where you put it as long as you have the correct HTML tags.

How your code should be (example online): link

(test remove () after releasing to see the code to fail to hide the div)

    
01.06.2014 / 08:23
What's the difference between creating a method and a block in a Ruby class? Understanding the survey