Progresso em Paginas

PMPauloMaia · Abril 3, 2013

Olá, pessoal do IMasters

Eu percebo que algumas de minhas paginas demoram um pouco para ser totalmente carregada.

Fui em busca de um codigo javascript ( que funcione em IE8 e nos demais navegadores, como chrome, Firefox , Opera etc....... ) e que reconhecesse essa demora e colocasse uma figura de loading .gif com z-index > 1 , para que ficasse passando a imagem por cima do site sendo carregado, e quando carregado,, a gif sumisse e ficasse só o site !

Alguém conhece esse código ? Pode postar aqui !

Olá, a todos.

Esse script não esta funcionando corretamente em IE8 !

<div id="Teste"> Testando </div>

<script>

var ld=(document.all);

var ns4=document.layers;

var ns6=document.getElementById&&!document.all;

var ie4=document.all;

if (ns4)

ld=document.loading;

else if (ns6)

ld=document.getElementById("Teste").style;

else if (ie4)

ld=document.all.loading.style;

function init()

{

if(ns4){ld.visibility="hidden";}

else if (ns6||ie4) ld.display="none";

}

</script>

Ele não esconde, "hiden" na <div id="Teste"> em navegador IE8 .

Onde mudo nesse script e como ele deve ficar para funcionar corretamente ?

ERRO !

Mensagem: O objeto não dá suporte para a propriedade ou método

Linha: 66

Caractere: 1

Código: 0

URI: http://localhost/Teste.php

???

Olá, Bom Dia - Conhecem a solução ? - para esse script funcionar !

Alaerte Gabriel · Abril 3, 2013

Amigo, você pode utilizar o evento onload no body de seu html e chamar o seu loading.

PMPauloMaia · Abril 3, 2013

Obrigado, Alaerte Gabriel

Porem já esta assim,

<body onLoad="init()" onselectstart="return false" onmousedown="event.preventDefault()" oncontextmenu="return false" ondragstart="return false" onmouseover="window.status='Site bq'; return true;" background="vibrant.jpg">

<div id="Teste"> Testando </div>

<script>

var ld=(document.all);

var ns4=document.layers;

var ns6=document.getElementById&&!document.all;

var ie4=document.all;

if (ns4)

ld=document.loading;

else if (ns6)

ld=document.getElementById("Teste").style;

else if (ie4)

ld=document.all.loading.style;

function init()

{

if(ns4){ld.visibility="hidden";}

else if (ns6||ie4) ld.display="none";

}

</script>

Júlio Pradera · Abril 3, 2013

Para tornar uma div invisível no Internet Explorer 8, basta usar esse comando:

document.getElementById('Teste').style.visibility = 'hidden';

Eu tentei no Internet Explorer 8, Google Chrome e Firefox. Todos aceitaram.
Acredito que esse comando seja aceito por qualquer navegador, tornando desnecessário criar um comando para cada um.
Pelo que eu entendi, é isso o que você está fazendo.

PMPauloMaia · Abril 3, 2013

Obrigado, Júlio Pradera

Para tornar uma div invisível no Internet Explorer 8, basta usar esse comando:
document.getElementById('Teste').style.visibility = 'hidden';
Eu tentei no Internet Explorer 8, Google Chrome e Firefox. Todos aceitaram.
Acredito que esse comando seja aceito por qualquer navegador, tornando desnecessário criar um comando para cada um.
Pelo que eu entendi, é isso o que você está fazendo.

Mas,

Adaptando no meu <script> </script> ficaria como ? ? ?

Júlio Pradera · Abril 3, 2013

Obrigado, Júlio Pradera

Mas,

Adaptando no meu <script> </script> ficaria como ? ? ?

Devo ser honesto e lhe dizer que não entendi muito como funciona (ou com deveria funcionar) o seu código.

Mas pelo que pude entender, você quer que a div seja ocultada quando a página for carregada, certo?

Se for só isso, é só substituir o conteúdo do bloco script pelo código que eu coloquei.

Como eu disse, acredito que ele funcione em todos os navegadores, sem a necessidade de criar um específico para cada.

PMPauloMaia · Abril 3, 2013

Júlio Pradera,

É isso mesmo .......

Devo ser honesto e lhe dizer que não entendi muito como funciona (ou com deveria funcionar) o seu código.
Mas pelo que pude entender, você quer que a div seja ocultada quando a página for carregada, certo?
Se for só isso, é só substituir o conteúdo do bloco script pelo código que eu coloquei.
Como eu disse, acredito que ele funcione em todos os navegadores, sem a necessidade de criar um específico para cada.

= => Agora nem aparece a div, em nenhum momento e em nenhum dos outros navegadores ! Antes funcionava nos outros e o problema era só no IE8.

Júlio Pradera · Abril 3, 2013

Júlio Pradera

<body onLoad="init()" >

<div id="Teste"> Testando </div>

<script>

document.getElementById('Teste').style.visibility = 'hidden';

</script>

Agora nem aparece a div, em nenhum momento !

Sim... ela está oculta.

Vamos lá então, exatamente o que você quer que esse código faça?

PMPauloMaia · Abril 3, 2013

Certo, Júlio Pradera

Estou carregando uma imagem .gif animada nessa div , simulando progresso - carregamento da pagina.

E quando tudo carregado na pagina ela desaparece !

- - - Com aquele script " maior " inicial , ele funciona corretamente nos outros navegadores a div - imagem fica na tela até tudo estar totalmente carregado e depois ela desaparecia, só no IE8 que ela aparece na tela porem tudo carrega e ela não desaparece ela fica rodando na tela infinitamente !

Júlio Pradera · Abril 3, 2013

Certo, Júlio Pradera

Estou carregando uma imagem .gif animada nessa div , simulando progresso - carregamento da pagina.

E quando tudo carregado na pagina ela desaparece !

- - - Com aquele script maior inicial , ele funciona nos outros navegadores a div - imagem fica na tela até tudo estar totalmente carregado e depois ela desaparecia, só no IE8 que ela aparece na tela porem tudo carrega e ela não desaparece ela fica rodando na tela infinitamente !

Agora que eu reparei que você não está chamando o código que eu lhe passei APENAS quando o corpo da página é carregado.

Antes, o problema é que só não funcionava no Internet Explorer 8, certo?

Nós outros navegadores, a div sumia assim que a página era carregada?

Se for isso, tente fazer assim:

<body onLoad="init()" >
  <div id="Teste"> Testando </div>
  <script>
    function init() {
      document.getElementById('Teste').style.visibility = 'hidden';
    }
  </script>

PMPauloMaia · Abril 3, 2013

Júlio Pradera

Agora que eu reparei que você não está chamando o código que eu lhe passei APENAS quando o corpo da página é carregado.
Antes, o problema é que só não funcionava no Internet Explorer 8, certo? OK
Nós outros navegadores, a div sumia assim que a página era carregada? OK
Se for isso, tente fazer assim:
<body onLoad="init()" >

<div id="Teste"> Testando </div>

<script>

function init() {

document.getElementById('Teste').style.visibility = 'hidden';

}

</script>

Funciona nos outros , mas IE8 ainda fica infinitamente na tela !

http://localhost/PHP/Teste.php

William Bruno · Abril 3, 2013

cara.. segue um exemplo bem simples de como fazer oque vc pediu:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Teste</title>

<script type="text/javascript">
function id(el) {
	return document.getElementById(el);
}
function hide(el) {
	id(el).style.display = 'none';//escondendo tudo
}
window.onload = function() {
	id('all').style.display = 'block';//liberando qndo terminar
	hide('loading');
}
</script>
<style>
#loading { 
	display: block;
	width: 200px;
}
.content { margin: 0 auto; }
#all {
	width: 1280px; overflow: hidden;
}
</style>
</head>
<body>
	<section id="all" class="content">
		<img src="http://fc03.deviantart.net/fs25/f/2009/250/e/5/Within_Temptation___Utopia_by_KigaMistriver.jpg" alt="">
		<img src="http://images.fanpop.com/images/image_uploads/within-temptation-within-temptation-595989_1672_1417.jpg" alt="">
		<img src="http://images4.alphacoders.com/247/247868.gif" alt="">
		<img src="http://www.withinforever.xpg.com.br/within_temptation_wallpaper_3_1024x768.jpg" alt="">
		<img src="http://wallpapers99.com/Within_Temptation--w1024x768--0--89--images/wallpaper/1024x768/Within_Temptation_13636.jpg" alt="">
	</section><!-- #all -->

	<img src="http://3.bp.blogspot.com/-Bo2GNAVNb90/URkAlN-0V_I/AAAAAAAACfs/VHFT6oP1ZTk/s1600/Loading+-+Carregando+%252826%2529.gif" alt="" id="loading" class="content"/>


<script type="text/javascript">
	hide('all');
</script>

</body>
</html>

note que chamei 5 imagens bem grandes, apenas para "demorar" para baixar elas e aparecer o loading.

O código é auto explicativo, mas se tiver dúvidas poste.

Júlio Pradera · Abril 3, 2013

Júlio Pradera

Funciona nos outros , mas IE8 ainda fica infinitamente na tela !

Eu acabei de testar aqui no Internet Explorer 8, outra vez, e a div sumiu.

Da uma olhada no depurador de códigos dele (F12) e vê se está aparecendo algum erro.

PMPauloMaia · Abril 3, 2013

-------------> Júlio Pradera

Eu acabei de testar aqui no Internet Explorer 8, outra vez, e a div sumiu.

Da uma olhada no depurador de códigos dele (F12) e vê se está aparecendo algum erro.

ok, Usei o F12 no IE8

Apareceu !

No canto inferior esquerdo aparece -> ! Concluido

! Erro na pagina

&

-------- > William Bruno,

No meu IE8 - NADA Ainda ! A gif não aparece, mas imagens grandes começam a aparecer sim - depois de um tempinho claro .

F12 =>



<html lang="en">

William Bruno · Abril 3, 2013

Seu ie8 está mal configurado. Ou instale ele novamente, ou verifique se o suporte a js está habilitado.

PMPauloMaia · Abril 3, 2013

Seu ie8 está mal configurado. Ou instale ele novamente, ou verifique se o suporte a js está habilitado.

Script Ativo = Habilitado

Script de mini aplicativos java = Habilitado

William Bruno · Abril 3, 2013

java não tem nada a ver com isso.

javascript é outra linguagem. Vc está rodando com um servidor local ? ou dando duplo clique ?

PMPauloMaia · Abril 3, 2013

Servidor Local - F12 no Dreamweaver ! Pag. php

Dian Carlos · Abril 3, 2013

Veja: http://forum.imasters.com.br/topic/479017-gif-ao-carregar-pagina/

William Bruno · Abril 3, 2013

então o problema é o seu ie8 mesmo, instale ele novamente ou corrija as configurações.

Arquivado

Progresso em Paginas

Recommended Posts

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Júlio Pradera 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Júlio Pradera 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Júlio Pradera 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Júlio Pradera 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Júlio Pradera 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

PMPauloMaia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dian Carlos 29

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501