Como criar um loading?

Aprendiz RJ · Maio 27, 2008

Olá pessoal, tudo bom?

Criei uma animação no programa ImageReady e exportei para extensão Flash. A animação ficou até bonita, o cliente gostou, porem percebo que existe uma demora ao carregar a animação e com isso quero criar um loading (carregando) como no site abaixo:

:::>>> http://www.nosvamos.com.br/ <<<:::

O site que eu quero criar um loading é esse:

:rolleyes: http://penhafestas.martinsrj.com/

OBS.:

Consegui resolver em parte, porem o loading só aparece no Internet Explorer e no firefox não.

Gostaria que pelo menos no Firefox e no internet explorer aparecesse.

Segui esse tutorial:

http://www.oficinadanet.com.br/artigo/454/criando_um_loading

Porem só teve efeito no IE.

Desde já agradeço ajuda.

fercosmig · Maio 27, 2008

posta seu código ae

Aprendiz RJ · Maio 27, 2008

fercosmig disse:
posta seu código ae

Pagina Index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>+ Penha Festas - Servi&ccedil;o Completo e Opcional</title>
<meta name="resource-type" content="document">
<meta name="generator" content="Locasite Meta Tag Creator">

<link rel="stylesheet" type="text/css" href="jcestiloindex.css">
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#ad7d4b" onload="MM_showHideLayers('menunavegacao','','show','imagem1','','show','loading','','hide','corpo_texto','','show')" oncontextmenu="return false">
     <div align="center">
        <div id="cabecalho"></div>
       <div id="pagina">
        <div id="menunavegacao">
        <span class="corpo_texto">Menu</span>
        <ul>
            <li><a href="index.html">+ HOME</a></li>
            <li><a href="index.html">+ SERVIÇOS</a></li>
            <li><a href="index.html">+ FALE CONOSCO</a></li>
        </ul>
        </div>
        <div id="imagem1">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="785" height="250">
          <param name="movie" value="imagens/banner_animacao_04.swf" />
          <param name="quality" value="high" />
          <embed src="imagens/banner_animacao_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="250"></embed>
        </object>
      </div>
        <div id="loading"></div>
      <div id="corpo_texto">
        <span class="corpo_texto">Empresa</span>
        <p>Penha Festas trabalha com dedicação e eficiência na realização de Festas Infantis, 15 Anos, Decora&ccedil;&otilde;es de igrejas, Casamentos, Bodas, Eventos Empresariais, contando sempre com uma equipe qualificada e motivada para prestar um atendimento personalizado.</p>
        <br />
        <p><span class="corpo_texto">Servi&ccedil;os</span></p>
        <p>Nós oferecemos tudo para você não se preocupar com nada.<br />
        Abaixo, descrevemos alguns, para sua escolha, os diversos serviços que prestamos. A Lista completa no link SERVIÇOS:<br /><br />
        <span class="corpo_texto_2">Coquetel</span><br />
        Coquetéis para todos os tipos de eventos, com mesa de sustentação.<br /><br />
        <span class="corpo_texto_2">Almoço / Jantar</span><br />
        Nem sempre é necessário um evento ou ocasião especial para servir-se bem.
        Preparamos almoço ou jantar na...<br />        
        Saiba mais acessando o link SERVIÇOS ou <a href="index.html">cliqui aqui.</a>
        </p>
      </div>
    </div>
    <div id="rodape">2008 Penha Festas - Serviço Completo e Opcional&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Desenvolvido por <a href="#" target="_blank">XXXXXXXXXXXX</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

jcestiloindex.css Arquivo CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>+ Penha Festas - Servi&ccedil;o Completo e Opcional</title>
<meta name="resource-type" content="document">
<meta name="generator" content="Locasite Meta Tag Creator">

<link rel="stylesheet" type="text/css" href="jcestiloindex.css">
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#ad7d4b" onload="MM_showHideLayers('menunavegacao','','show','imagem1','','show','loading','','hide','corpo_texto','','show')" oncontextmenu="return false">
     <div align="center">
        <div id="cabecalho"></div>
       <div id="pagina">
        <div id="menunavegacao">
        <span class="corpo_texto">Menu</span>
        <ul>
            <li><a href="index.html">+ HOME</a></li>
            <li><a href="index.html">+ SERVIÇOS</a></li>
            <li><a href="index.html">+ FALE CONOSCO</a></li>
        </ul>
        </div>
        <div id="imagem1">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="785" height="250">
          <param name="movie" value="imagens/banner_animacao_04.swf" />
          <param name="quality" value="high" />
          <embed src="imagens/banner_animacao_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="250"></embed>
        </object>
      </div>
        <div id="loading"></div>
      <div id="corpo_texto">
        <span class="corpo_texto">Empresa</span>
        <p>Penha Festas trabalha com dedicação e eficiência na realização de Festas Infantis, 15 Anos, Decora&ccedil;&otilde;es de igrejas, Casamentos, Bodas, Eventos Empresariais, contando sempre com uma equipe qualificada e motivada para prestar um atendimento personalizado.</p>
        <br />
        <p><span class="corpo_texto">Servi&ccedil;os</span></p>
        <p>Nós oferecemos tudo para você não se preocupar com nada.<br />
        Abaixo, descrevemos alguns, para sua escolha, os diversos serviços que prestamos. A Lista completa no link SERVIÇOS:<br /><br />
        <span class="corpo_texto_2">Coquetel</span><br />
        Coquetéis para todos os tipos de eventos, com mesa de sustentação.<br /><br />
        <span class="corpo_texto_2">Almoço / Jantar</span><br />
        Nem sempre é necessário um evento ou ocasião especial para servir-se bem.
        Preparamos almoço ou jantar na...<br />        
        Saiba mais acessando o link SERVIÇOS ou <a href="index.html">cliqui aqui.</a>
        </p>
      </div>
    </div>
    <div id="rodape">2008 Penha Festas - Serviço Completo e Opcional&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Desenvolvido por <a href="#" target="_blank">XXXXXXXXXXXX</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

KaKarotto · Maio 28, 2008

Pequeno Aprendiz Jedi, o que você pode fazer é usar uma div para mostrar uma imagem de loading até que toda a página seja carregada.

Com javascript é só usar o window.onload, que será o evento de quando a janela for toda carregada, inclusive as imagens.

Seria algo assim:

window.onload=function(){
document.getElementById("meudiv").innerHTML="Seu código html"
}

<div id="meudiv">
<img src="loading.gif" />
</div>

A princípio você deixaria uma imagem de loading dentro do div, quando a página for toda carregada ela vai executar o evento window.onload. Alí eu peguei o div e substituí a imagem que tinha dentro por um código em html, um texto apenas. você pode colocar ali um banner em flash ou qualquer outro html. Basta por dentro de aspas para o javascript entender. Se algum elemento dentro dessas aspas tiver aspas você usa aspas simples:

document.getElementById("meudiv").innerHTML="<p class='Paragrafo1'> Meu paragrafo legalllllllllllllllll </p>"

Beleza?

Aquele abraço.

Aprendiz RJ · Maio 28, 2008

KaKarotto disse:
Pequeno Aprendiz Jedi, o que você pode fazer é usar uma div para mostrar uma imagem de loading até que toda a página seja carregada.
Com javascript é só usar o window.onload, que será o evento de quando a janela for toda carregada, inclusive as imagens.
Seria algo assim:
window.onload=function(){
document.getElementById("meudiv").innerHTML="Seu código html"
}
<div id="meudiv">
<img src="loading.gif" />
</div>
A princípio você deixaria uma imagem de loading dentro do div, quando a página for toda carregada ela vai executar o evento window.onload. Alí eu peguei o div e substituí a imagem que tinha dentro por um código em html, um texto apenas. você pode colocar ali um banner em flash ou qualquer outro html. Basta por dentro de aspas para o javascript entender. Se algum elemento dentro dessas aspas tiver aspas você usa aspas simples:
document.getElementById("meudiv").innerHTML="<p class='Paragrafo1'> Meu paragrafo legalllllllllllllllll </p>"
Beleza? Aquele abraço.

Valeu KaKarotto pela dica. Esse código

window.onload=function(){
document.getElementById("meudiv").innerHTML="Seu código html"
}

eu coloco em qual parte?

Desculpe pela ignorancia, pois não conheço JavaScript.

Abraços.

KaKarotto · Maio 28, 2008

Tudo bem, no começo do seu código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>+ Penha Festas - Servi&ccedil;o Completo e Opcional</title>
<meta name="resource-type" content="document">
<meta name="generator" content="Locasite Meta Tag Creator">

<link rel="stylesheet" type="text/css" href="jcestiloindex.css">
<script type="text/JavaScript">
<!--
// O código vem aqui
window.onload=function(){
document.getElementById("meudiv").innerHTML="Seu código html"
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

Pode por antes das funções definidas pelo DW, como eu fiz ali. Mas deve usar um div com id "meudiv".

Se quiser usar outro id é só alterar no código.

Aquele abraço

Aprendiz RJ · Maio 28, 2008

KaKarotto disse:

Tudo bem, no começo do seu código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>+ Penha Festas - Servi&ccedil;o Completo e Opcional</title>
<meta name="resource-type" content="document">
<meta name="generator" content="Locasite Meta Tag Creator">

<link rel="stylesheet" type="text/css" href="jcestiloindex.css">
&lt;script type="text/JavaScript">
<!--
// O código vem aqui
window.onload=function(){
document.getElementById("meudiv").innerHTML="Seu código html"
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

Pode por antes das funções definidas pelo DW, como eu fiz ali. Mas deve usar um div com id "meudiv".

Se quiser usar outro id é só alterar no código.

Aquele abraço

Olá Kakarotto...

Fiz dessa forma conforme o link Abaixo:

Link Index.html: http://pastebin.com/m62af1bc0

Link CSS - jcestiloindex.css: http://pastebin.com/m6b22a9d8

Porem o loading aparece numa boa, porem agora o arquivo Flash não aparece!!!

KaKarotto · Maio 29, 2008

Nossa véio...o que é aquilo lá?

Tá uma baderneira...

Cara, olha só, só faz isso, bota essa função abaixo onde eu te falei:

window.onload=function(){
    var flash='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="785" height="250">'
    flash+='<param name="movie" value="imagens/banner_animacao_04.swf" />'
    flash+='<param name="quality" value="high" />'
    flash+='<embed src="imagens/banner_animacao_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="250"></embed>'
    flash+='</object>'
    document.getElementById("imagem1").innerHTML=flash
}

E lá no html você coloca dentro da sua div de id="imagem1" uma imagem. Qualquer uma de loading...

Quando o documento ficar pronto, o window.onload vai ser ativado e vai tirar aquela imagem e botar o flash.

Não inventa hein...

Aprendiz RJ · Maio 29, 2008

KaKarotto disse:
Nossa véio...o que é aquilo lá?
Tá uma baderneira...
Cara, olha só, só faz isso, bota essa função abaixo onde eu te falei:
window.onload=function(){
    var flash='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="785" height="250">'
    flash+='<param name="movie" value="imagens/banner_animacao_04.swf" />'
    flash+='<param name="quality" value="high" />'
    flash+='<embed src="imagens/banner_animacao_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="250"></embed>'
    flash+='</object>'
    document.getElementById("imagem1").innerHTML=flash
}
E lá no html você coloca dentro da sua div de id="imagem1" uma imagem. Qualquer uma de loading...
Quando o documento ficar pronto, o window.onload vai ser ativado e vai tirar aquela imagem e botar o flash.
Não inventa hein...

Olá KaKarotto agora funcionou!!! A imagem loading informa para o usuario que a imagem está sendo carregada, porem infelizmente só está ocorrendo no IE e no firefox quando aberto pela primeira vez não funciona. Agora que eu reparei foi o seguinte, se eu abrir pela 2° vez a pagina no Firefox aparece rapidamente a imagem loading e some dando lugar a animação em flash.

Segue abaixo o código:

index.html: http://pastebin.com/m62e6818c

CSS: http://pastebin.com/m279428af

Abraços e obrigado pela paciencia... rsrsrsrs

Entrar

Como criar um loading?

Pergunta

Aprendiz RJ

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

Aprendiz RJ

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Aprendiz RJ

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Aprendiz RJ

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Aprendiz RJ

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades