Foros del Web - Ver Mensaje Individual

emprear · #5 (**permalink**) 11/02/2013, 13:13

Cita:

Iniciado por alphasky

Hay alguna variable para este caso?

Hay alguna manera de poner en el html que le pida las imagenes 1 a 1 y no todas de golpe?

Sin javascript no, aqui hay una técnica más o menos sencilla

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
img{
display:block;
margin: 10px 2px;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function cargar_siguiente(a,n){
document.getElementById(n).src = a;
}
 
 
//]]>
</script>
</head>
<body>
<div id="imga">
<img src="uno.jpg" alt="" onload="cargar_siguiente('dos.png','i_2')" id="i_1" />    
<img src="transparente.gif" alt="" onload="cargar_siguiente('tres.jpg','i_3')" id="i_2" />
<img src="transparente.gif" alt="" onload="cargar_siguiente('cuatro.jpg','i_4')" id="i_3" />
<img src="transparente.gif" alt="" id="i_4" />  
    
</div>
</body>
</html>

la idea es más o menos esta:
creas una imagen transparente de 1x1 pixels y la ponés por defecto en todas los <img> menos en el primero. Ponés un id a las imágenes, luego usas el evento onload en las imágenes (menos en la última por supuesto) que llama a la función cargar_siguiente(), pasando como parámetros el nombre de la imagen que se cargará en el siguiente <img>, del cual, ponés el id.
cargar_siguiente() se encargará de reemplazar el gif transparente por la que hayas indicado.
En conclusión ninguna imagen se va a cargar hasta que no se halla cargado la anterior. esto es muy básico y se le pueden hacer mejoras (como precargar las imágenes antes de la sustitución)

Pero te doy una mala noticia, con casi 100 kb de código y más de 100 imágenes en una sola página (que por otra parte no has comentado el peso de las mismas)el comportamiento igual puede ser imprevisible

Saludos