Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal to com um probleminha!
Estou construindo uma pagina que tem muitos scripts para carregar, então queria criar um espécie de preloader para página mostrando a mensagem "Carregando..."
****
Eu até fiz um em js não ele não funciona como deveria!
Ficou mais ou menos assim:
lembrando que o css da div "all" esta inicialmente definido como "none"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" media="screen" />
<link href="css/lightbox.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<script src="js/galeria/prototype.js" type="text/javascript"></script>
<script src="js/galeria/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/galeria/lightbox.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="js/floatbox/floatbox.css" />
<script type="text/javascript" src="js/floatbox/floatbox.js"></script>
<script type="text/javascript" src="js/boxover.js"></script>
<script LANGUAGE="JavaScript">
function mostra()document.getElementById("all").style.display = "block";
document.getElementById("msg_page").style.display = "none";
}
</SCRIPT>
<title>Ferjac</title>
</head>
<body id="portfolio" onload="mostra()">
<div id="msg_page">Carregando...</div>
<div id="all">resto do conteúdo....!
</div>
</body>
</html>Pelo que podemos entender ele só vai mostrar todo conteúdo dá pagina quando todo conteudo em body estiver carregado.
O problema é que os scripts não estão dentro do body então o tempo que a mensagem "carregando.." fica aparecendo não se refere a eles!
Para tentar resolver isso fiz assim:
para que a mensagem só desaparecesse quando todo conteudo incluindo scripts fosse carregado coloquei os scripts dentro do body também!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" media="screen" />
<script LANGUAGE="JavaScript">
function mostra()
{
document.getElementById("all").style.display = "block";
document.getElementById("msg_page").style.display = "none";
}
</SCRIPT>
<title>Ferjac</title>
</head>
<body id="portfolio" onload="mostra()">
<div id="msg_page">Carregando...</div>
<div id="all">
<link href="css/lightbox.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<script src="js/galeria/prototype.js" type="text/javascript"></script>
<script src="js/galeria/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/galeria/lightbox.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="js/floatbox/floatbox.css" />
<script type="text/javascript" src="js/floatbox/floatbox.js"></script>
<script type="text/javascript" src="js/boxover.js"></script>
resto do conteúdo....!
</div>
</body>
</html>O problema é que fazer isso (colocar essas tags script e link dentro do body) dão erro na hora da validação na W3C.
****
Alguem sabe outra maneira de fazer um preloader para página que não seja dessa forma??
Aqui como ficou das duas formas!
****
Modo que deu certo (mas sem código válido)
talvez seja necessário limpar o cache para ver a diferenca de uma pra outra!
Carregando comentários...