Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como fazer um loading q pre carrega 2 paginas e so abre quando estiver totalmente carregadas e com uma imagem de loading no meio
Oi @kenweb, pq 2 páginas ?
Eu ainda não vi necessidade de ajax, explique-se melhor.
eh o seguinte eh um site de uma pagina q tem 2 cores disponiveis, mais ta um pouco pesadinho, entao queria colocar a imagem de um loading q so entraria quando as 2 paginas estiverem 100% para q o visitante troca de cor diretamente,
essa de trocar de cor eu queria q trocava lentamente mais ninguem ajudou entao ta sendo instanteneo mesmo ___
entenderao???!?!?!??!
Carregando por ajax ou em um iframe escondido irá carregar as imagens no cache, então provavelment ficará mais rápida a transição, por outro lado levará o dobro do tempo para carregar a primeira vez.
Ainda assim se é isso mesmo que você quer, você poderá colocar todo o conteúdo da sua página em um container e esconde-lo com css, e utilizar outro container para exibir o loading.
No evento onload você troca, torna visível o corpo e invisível o loading.
Exemplo:
<html>
<head>
<script type="text/javascript">
function loaded() {
document.getElementById('loading').style.display = 'none';
document.getElementById('corpo').style.display = 'inline';
}
</script>
</head>
<body onload="loaded">
<div id="corpo" style="display:none;">
<!-- Seu conteudo da página aqui -->
</div>
<div id="loading">
<!-- Seu conteudo de loading aqui -->
</div>
</body>
</html>Lembre-se que se você for carregar a segunda página por iframe ou ajax deverá esperar o conteudo dela ser carregado tambem. Sugiro que você apenas habilite o link de troca de estilo depois que a outra página já estiver em cache.
>
essa de trocar de cor eu queria q trocava lentamente mais ninguem ajudou entao ta sendo instanteneo mesmo ___
Se o tópico onde você diz que ninguém lhe ajudou for este, acho que você está errado, tem muito material para estudo lá. Seu último post diz que você ia ler um artigo e depois você não disse mais nada.
Se restaram dúvidas, porquê não criou outro post mostrando até onde você chegou para que pudessemos avaliar ? :thumbsup:
Sua pergunta é muito vaga (como (quase) sempre).
A solução é o AJAX). Para entender melhor - utilizando JavaScript puro -, veja este artigo.
Se quiser um exemplo com jQuery, clique aqui.
A Internet tem centenas de artigos à respeito. Já pensou em dar uma consultada aqui antes de criar um tópico e esperar os scripts prontos? ;)