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"> </td>
<td><img id="commercial" src="botones/commercial.gif" onmouseover="over('commercial');" onmouseout="out('commercial');" onclick="commercialf();"></td>
<td class="separadorlinks"> </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>