Cómo pongo un "Image loading"

#1 (**permalink**) 29/12/2008, 21:04

Buenas. Hice una página que es muestra fotos. Y necesito ponerle algún ícono o cartel de "Image loading" mientras se carga la foto. Porque si es grande tarda y pareciera como si se colgara.

Cómo se hace ?

Aquí dejo el código de la página.

Código HTML:

<? include("contadir.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Nicole Arcuschin Photography</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript">
  var cateover = '';
  var cateout = '';
  var fotonum = 100;
  var cantper = <?echo $cantper;?>;
  var cantcom = <?echo $cantcom;?>;
  var limite = 0;
  var path = '';
  var select = '';
  var salida = 'commercial';
  function over(cateover){
    document.getElementById(cateover).src='botones/'+cateover+'-hover.gif';
  }
  function out(cateout){
    if(cateout != select){    
      document.getElementById(cateout).src='botones/'+cateout+'.gif';
    }
  }
  function outselect(salida){
    document.getElementById(salida).src='botones/'+salida+'.gif';
  }
  function activo(act){
    document.getElementById(act).src='botones/'+act+'-hover.gif';
  }
  function contactf(){
    outselect(salida);
    select = 'contact';
    activo(select);
    document.getElementById('foto').src='img/fotocontacto.jpg';
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='none';
    salida = select;
  }
  function personalf(){
    outselect(salida);
    select = 'personal';
    activo(select);
    fotonum = 100;
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='inline';
    document.getElementById('foto').src='fotos/personal/100.jpg';
    path = 'fotos/personal/';
    limite = cantper + 99;
    salida = select;
  }
  function commercialf(){
    outselect(salida);
    select = 'commercial';
    activo(select);
    fotonum = 100;
    document.getElementById('flechaleft').style.display='none';
    document.getElementById('flecharight').style.display='inline';
    document.getElementById('foto').src='fotos/commercial/100.jpg';
    path = 'fotos/commercial/';
    limite = cantcom + 99;
    salida = select;
  }
  function atrasfoto(){
    fotonum = fotonum - 1;
    if(fotonum == 99){
      fotonum = 100;
    }
    if(fotonum == 100){
      document.getElementById('flechaleft').style.display='none';
    }
    if(fotonum >= 100){
      document.getElementById('foto').src = path + fotonum + '.jpg';	
    }    
    if(fotonum == limite - 1){
      document.getElementById('flecharight').style.display='inline';
    }
  }
  function adelantefoto(){
  fotonum = fotonum + 1;
    if(fotonum == 101){
      document.getElementById('flechaleft').style.display='inline';
    }
    if(fotonum == limite){
      document.getElementById('flecharight').style.display='none';
    }	
    if(fotonum <= limite){
      document.getElementById('foto').src = path + fotonum + '.jpg';
    }
  } 
  </script>
  </head>
  <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
    <div class="divcontenedor">
      <div class="divlinks">
        <table class="tablalinks">
          <tr>
            <td><img id="personal" src="botones/personal.gif" onmouseover="over('personal');" onmouseout="out('personal');" onclick="personalf();"></td>
            <td class="separadorlinks">&nbsp;</td>
            <td><img id="commercial" src="botones/commercial.gif" onmouseover="over('commercial');" onmouseout="out('commercial');" onclick="commercialf();"></td>
            <td class="separadorlinks">&nbsp;</td>
            <td><img id="contact" src="botones/contact.gif" onmouseover="over('contact');" onmouseout="out('contact');" onclick="contactf();"></td>
          </tr>
        </table>
      </div>
      <div class="divgaleria">
        <table class="tablagaleria">
          <tr>
            <td class="tdflechas"><img id="flechaleft" class="flechaleftclase" src="botones/prev-pic.gif" onclick="atrasfoto();"></td>
            <td class="tdfoto"><img id="foto" class="fotoclase" src="img/fotomain.jpg"></td>
            <td class="tdflechas"><img id="flecharight" class="flecharightclase" src="botones/next-pic.gif" onclick="adelantefoto();"></td>
          </tr>
          <tr>
            <td class="tdloader" colspan="3"><img id="loader" src="img/loader.gif"></td>
          </tr>
        </table>
      </div>
      <div class="divjaz">
        <img id="jaz" src="botones/jaz.gif" onclick="window.open('http://www.jazminberakha.com');" onmouseover="over('jaz');" onmouseout="out('jaz');">
      </div>
    </div>
  </body>
</html>

Fernand0 · #2 (**permalink**) 29/12/2008, 23:26

Estoy medio decerebrado a esta hora..

Ahm...

<img id="loader" src="loader.gif"/>

debajo..

<img id="imagen" src="imagen.png" style="display: none;" onload="haceralgo(this);"/>

Código javascript:

Ver originalfunction haceralgo(img)
{
var load=document.getElementById('loader');
load.parentNode.removeChild(load);
img.style.display='block';
}