Orden en que se cargan las imagenes de una pagina ???

[gabriel em]

Tengo un sitio que tiene muchas imagenes chiquitas, que al cargar por primera vez la pagina se van apareciendo sin ninguna correlacion hasta formar la pagina terminada.
Quiero saber si hay alguna forma de darle prioridades o algun orden para que cargue primero las que yo quiero.

[Daniel Ulczyk]

Podemos saber la URL de tu página?

[gabriel em]

No, porque por estos dias estoy cambiando de servidor, pero te comento que es una imagen hecha en photoshop que con la herramienta slice la corte en muchas imagenes, que son justamente las que se van cargando pero no en un orden logico, por lo cual quisiera ver si se puede dar una prioridad a la carga, algo asi como funciona tabindex para los formularios.
La pagina es un simple html donde se van cargando las imagenes como tablas.

[Daniel Ulczyk]

La pagina es un simple html donde se van cargando las imagenes como tablas

Si estás utilizando tablas para efectuar el diseño, te comento que no todos los navegadores cargan el contenido de idéntica manera.
Por lo que el resultado de aparición variará de uno a otro.
Ahora bien, el browser va interpretando etiqueta tras etiqueta y cuando se encuentra con el tag <img> comienza a descargarla en caché para luego mostrarla en pantalla. A menores dimensiones, menor peso, algunas imágenes se cargarán antes que otras (mayor dimensión, mayor peso).
Lo que se me ocurre es que puedas cargar todas las imágenes (un preloader), mostrar en el entretanto una barra de progreso, y al finalizar mostrar todo.
Si esto te interesa, te pongo un ejemplo:

Código:

// Progressbar - Version 2.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"

var imagenames=new Array(''imagenes/slice_01',',
'imagenes/slice_02',
'imagenes/slice_03',
);

var yposition=250;                                  //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ;                // PROGRESS BAR COLOR
var unloadedcolor='white';                   // BGCOLOR OF UNLOADED AREA
var barheight=15;                                 // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350;                                // WIDTH OF THE BAR IN PIXELS  
var bordercolor='black';                       // COLOR OF THE BORDER

//DO NOT EDIT BEYOND THIS POINT 
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Cargando archivos de imágenes...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Cargando archivos de imágenes...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;

Espero te sea útil.
Saludos!

[gabriel em]

Daniel gracias por ayudarme. Igualmente se me ocurrio una forma mas practica con javascript. Lo comento aqui, por ahi le sirve a alguien:

A cada celda que son las que tienen las imagenes que al final forman la pagina las puse como invisibles agregandoles style="display: none;" , por ejemplo:

Código:

<IMG NAME="Terminada_sin_campos5" SRC="Terminada_sin_campos_3x2.jpg" WIDTH="576" HEIGHT="379" BORDER="0"  style="display: none;">

( Se lo agrego a todas menos a la primera que quiero que se carge )

Tambien les agrego un Id a todas, el nombre lo invento yo, por ejemplo la anterior quedaria asi:

Código:

<IMG NAME="Terminada_sin_campos5" SRC="Terminada_sin_campos_3x2.jpg" WIDTH="576" HEIGHT="379" BORDER="0" Id="CeldaGrande"  style="display: none;">

Con esto logro que no se carguen las imagenes salvo la primera. Ahora lo que tengo que lograr es que se cargen en el orden que yo quiero, para esto lo que hago es que al cargarse la primera se ejecute una funcion que haga visible la que yo quiero que sea la segunda, esto lo con Onload que llama a la funcion javascript encargada de hacer visible la celda que yo quiero, lo hago asi:

Código:

<IMG NAME="Terminada_sin_campos13" SRC="Terminada_sin_campos_8x1.jpg" WIDTH="780" HEIGHT="58" BORDER="0" onLoad="PeliculaVisible();">

Y en javascript creo una funcion que haga visible la segunda celda:

Código:

function PeliculaVisible() { 
document.getElementById("celda2").style.display="inline";
}

Y repito esto hasta que se complete en el orden que yo quiero.

No se si quedo muy claro, pero porlomenos les dejo la idea, parece complicado pero la verdad es bastante facil y rapido.

Saludos

[caricatos]

Hola:

El problema de cambiar los estilos de esta manera es que son datos no-accesibles si el cliente tiene javscript desactivado...

La solución accesible sería ocultar las imagenes que quieras con el evento onload del objeto window, y sobre el tema de precargar las imágenes, es cosa javascript, y en ese foro hay algunos mensajes explicándolo...

Saludos

[Daniel Ulczyk]

Yo creo que la accesibilidad se cayó de bruces desde el momento en que se decidió que el diseño estaría basado en tablas.

[caricatos]

Iniciado por Daniel Ulczyk

Yo creo que la accesibilidad se cayó de bruces desde el momento en que se decidió que el diseño estaría basado en tablas.

Hola:

No sé la razón del comentario, pero la accesibilidad de una imágen, sería simplemente verla... y si en principio está oculta, los que tienen javascript desactivado nunca la verán... en cambio si se oculta con javascript, tendremos la certeza de que javascript funciona y podrá volverse a mostrar también con javascript; en cambio si javascript está desactivado jamás se ocultará... la verdad es que quien desactiva javascript se pierde muchas funcionalidades como la tecnología ajax, pero cada usuario está en su derecho de tenerlo como quiera...

La verdad es que el código accesible para mostrar una tabla con imágenes no creo que se pueda considerar complejo...

<script>
var tabla, imagenes_tabla;
function precargarTabla() {
if (--imagenes_tabla == 0) tabla.style.display = "inline";
}

function cargar() {
tabla = document.getElementById("tabla");
imagenes_tabla = tabla.images.length;
for (i = 0, total = imagenes_tabla; i < total; i ++)
tabla.images[i].onload = precargarTabla;
tabla.style.display = "none";
}
</script>

Saludos

[Daniel Ulczyk]

OK caricatos, estoy de acuerdo. La técnica no debiera ser ocultar la imagen vía CSS y mostrarla luego con JavaScript.
Atento a lo que decís, debiera ser la forma correcta.

[webosiris]

muevo a JavaScript porque le tema se orientó para ese lado

[gabriel em]

Gracias por sus comentarios.
La verdad es que lo voy a dejar asi como lo hice yo, por algunas razones:

La primera es que el porcentaje de gente que deshabilito el javascript de su pc es casi nulo. Es mas, si uno deshabilita el javascript no puede navegar mas de 5 minutos porque no anda casi ningun sitio o andan mal.Seamos realistas, un sitio como la gente es muy dificil que no contenga javascript en absoluto. La realidad es que es casi imposible crear un sitio con una complejidad basica que funcione perfecto en todos los navegadores con o sin javascript.

La segunda es que mi sitio apunta justamente a gente que no sabe mucho de computacion, con lo cual es mas dificil todavia encontrar algun curioso que desactivo el javascript o que use algun navegador que no sea el IE.

Lo que si no entiendo es lo de las paginas hechas con el slice de photoshop. Anda perfecto, se carga prolija y encima lo probe en otros navegadores y se ve perfecto. No es como las capas que cada explorador las pone donde quiere. Las tablas siempre encajan bien. Es simplemente como si creara una celda a mano y la dividiera en cuatro y a cada una le pongo una imagen..... nada raro.

Igualmente les agradezco sus opiniones.