I wanted to know how to do a JS, to display the contents of certain parts of a website, only after all the content has been loaded, this includes, JS, Images, CSS and Some external data like the facebook plugin return. ..
It is resolved by combining the response of
thiagobarradas and Silvio Andorinha
And even though they are not fully efficient, as the facebook data is the first to be called from the time of loading everything since the data after it is slower
Use DEFER
<div id="hiddenDiv" style="display: none;">
<!-- qualquer coisa aqui -->
</div>
JAVASCRIPT
<script type="text/javascript" DEFER="DEFER">
document.getElementById("hiddenDiv").style.display = "block";
</script>
NOTE: DEFER indicates that the script block will only load after the page loads.
for more details: link
Using HTML, CSS and JS:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Carregar parte após todo carregamento</title>
<style>
/* inicia a div 'depois' invisível */
/* seletor css por id */
#depois { display: none; }
</style>
<script>
/* função JS 'mostrarConteudo()' que identifica objeto 'depois' e torna-o visível */
function mostrarConteudo() {
var elemento = document.getElementById("depois");
elemento.style.display = "block";
}
</script>
</head>
<!-- ao evento 'onload' (carregar a página) acione a função mostrarConteudo() -->
<body onload="mostrarConteudo();">
<div id="main">
<!-- Conteúdo Inicial -->
</div>
<div id="depois">
<!-- Carregar Após Carregamento Inicial -->
</div>
</body>
</html>
Using jQuery:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Carregar parte após todo carregamento</title>
<!-- importa a biblioteca jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
/* inicia a div 'depois' invisível */
/* seletor css por id */
#depois { display: none; }
</style>
<script>
/* .ready é equivalente ao onload. define uma função anônima para mostrar div */
$(document).ready(function(){
$("#depois").css("display", "block");
});
</script>
</head>
<body>
<div id="main">
<!-- Conteúdo Inicial -->
</div>
<div id="depois">
<!-- Carregar Após Carregamento Inicial -->
</div>
</body>
</html>
References:
You can by what you do not want visible in an element with display: none; and, at an opportune moment, like body.onload , make it visible.
<div id="hiddenDiv" style="display: none;">
<!-- qualquer coisa aqui -->
</div>
document.getElementById("hiddenDiv").style.display = "block";
But if you want to leave it literally invisible (that is, taking up space in the layout), you can work with the opacity property instead of display . If it does, it may include a brief fade while loading the page. It gets subtler for the end user than having one element pop up out of nowhere and moving everyone else to new positions.
In css define:
// Seletor com ID
#parte{
display: none;
}
In jquery:
$(document).ready(function(){
// Seletor com ID
$('#parte').css("display", "block");
})
When the document is read (%) of% (any element with #parte ) will no longer have a ID="parte" (invisible) and will have a display: none (visible)