14
I need a GIF to stay working while the page loads. I’ve tried a few ways but none worked. And when the page loads, the Completed!. More or less as it happens on this website.
1 answer
16
In fact what happens on this site is that it puts over the content a DIV that covers everything and as soon as the content is loaded (document.load) it hides the DIV with an effect of fadeOut.
I redid it in Jsfiddle to make it easier (although you will see better the effect on your page directly).
HTML
<div id="preloader"><h1>CARREGANDO</h1></div>
<div id="conteudo">
<img src="http://3rdbillion.net/wp-content/uploads/2013/11/d6c7c50b9b49412a2ad9f847dcbaeeba13.jpg">
</div>
CSS
body {
background: #000;
}
#preloader {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
background: #ccc;
}
Javascript
$(document).ready(function(){
//Esconde preloader
$(window).load(function(){
$('#preloader').fadeOut(1500);//1500 é a duração do efeito (1.5 seg)
});
});
In place on "loading" just put your tag <img> with a GIF you want. Although it is already possible to make a simple animation with CSS3 so you do not need to use image.
-
Very good, thank you very much.
Browser other questions tagged javascript jquery html css html5
You are not signed in. Login or sign up in order to post.
You have the event onload http://www.w3schools.com/jsref/event_body_onload.asp Or try to display the source code there and see how it was implemented.
– Tony
If you want to do without external dependencies: http://answall.com/questions/66039/como-coloca-uma-gif-antes-de-exibir-a-p%C3%A1gina-do-site/67568#67568
– Jonatas Walker
You may also consider adding a third-party library such as Pace.js
– Dorathoto
http://github.hubspot.com/pace/docs/welcome/
– Dorathoto