1
I wanted to know how to make a JS, to display the content of certain parts of a site, just after all the content has been loaded, this includes, JS, Images, CSS and Some external data like the return of the plugin facebook...
It is solved by combining the answers of
thiagobarradas and Silvio Andorinha
And even though it’s not totally effective, as the facebook data is the first to be called from the time to load everything since the data after it is slower
7
Use the 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 be loaded after all page loading.
for more details : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
4
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:
I am editing, unfortunately by mania I used tab instead of 4 spaces and sent before even formulating part of the answer... wait.
I figured it was a problem of Fastest Gun in the West even.
passing the <script> to the end of the page worked better than onload, since it ignores what is outside the body... at least in the browsers I tested gave time to load the content of twitter and facebook before displaying :D
@Rodrigoborth If you want to display only after facebook/twitter has finished loading (no, that’s not clear on the question), you’ll need some notification from them, a callback maybe. Any other method is just an approximation and will not work on all cados. I suggest giving more details on the question.
2
You can put what you don’t want visible in an element with display: none; and, at an opportune moment, as in 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 make it literally invisible (i.e., taking up space in the layout), you can work with the property opacity instead of display. If appropriate, it may include a short fade when loading the page. It becomes more subtle for the end user than having an element come out of nowhere and moving everyone else to new positions.
the problem of this is that even putting the onload on the body it loads before the JS
You say, before the <script> load and run the file? Or before some library load function (you mentioned a facebook plugin) return? In this second case you need to see a way to have a callback with the library itself and run it in it.
ignoring the facebook case, still, it loads the images and all the html, but displays the content before the scripts load completely, this scripts are in the head of the html
@Rodrigoborth Try the window.onload instead of the body.onload
Do you want pure JS? It can be done with jQuery, using $(Document). ready(Function(){...}); or $(windows). load(Function(){...});
can be in jquery too
-2
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 (loaded) to #parte(any element with the ID="parte") will no longer have a display: none (invisible) and will have a display: block(visible)
What if it takes more than 1 second? I can’t leave people who have fast internet waiting or who have slow internet seeing all the wrong content
decrease, just change to 300 milliseconds or less
Can better expose the solution?
The point is to show the content after full page loading, and not show after a randomly set time.
Browser other questions tagged javascript
You are not signed in. Login or sign up in order to post.
@Rodrigoborth look at that.
– Silvio Andorinha
Try to use more reliable refection sources than w3schools, here is one topical at the goal. The w3fools speaks of some problems of w3schools.
– rray
Okay, I’ll find another referral site...
– Silvio Andorinha
really, had never heard of DEFER and really completely solves the problem
– RodrigoBorth