Precarga de imagenes y ajax

[kbmaster]

Buenas tengo un pequeño problema, estoy trabajando con mootools, el caso es que intento cargar el resultado (codigo html) de una consulta ajax en una div y estoy usando ademas un plugin que genera scrollbars con skins para ese div.

Al lanzar el plugin este genera el tamaño del scrolling adaptandolo al contenido del div, el inconveniente es que, como las imagenes no estan cargadas, el tamaño total del contenido del div antes de lanzar el plugin es menor que al finalizar la carga de las imagenes, por lo q el scrolling calculado acaba siendo incorrecto.

El codigo del metodo es asi...

render:function()
{
title=this.title;
content=this.content;

//----preload images-------------------
var searchvalue='src=';
var fromindex=0;
var result=0;

while(result!=-1 )
{
result=content.indexOf(searchvalue,fromindex);
if(result!=-1)
{
end=content.indexOf(' ',result);
src=content.substring(result+4,end);
new Element('img', { 'src':src});
fromindex=end;
}

}
//-------------------------------------


$('_title').innerHTML="<h4>"+title+"</h4>";
$('_content').innerHTML="<div class='post'>"+content+"</div>";


var S =new Scroll({selector:'#_content'});//aca lanzo el plugin del scrooll
},


nada complicado...obtiene el contenido lo inserta en el div y llama al plugin q genera la scroolbar con skin adaptada al contenido .

He intentado generar una suerte de precarga de las imagenes obteniendo iterativamente la scr de c/u a partir del string del contenido (q obtengo con ajax en un paso previo) y si bien mejora ampliamnete la performace de la carga aun no es suficiente.

Quisiera q me dijeran si existe alguna forma de saber precisamente cuando se terminan de cargar las imagenes una vez insertado el contenido en el div de manera de poder llamar a mi plugin en ese momento.

Otras ideas tambien son bienvenidas , gracias.

[deirdre]

Hola kbmaster

¿Y no puedes hacer un proload de todas esas imágenes en la página padre, para que queden en el caché del navegador dispuestas a ser utilizadas?

Bye

[kbmaster]

En realidad es mas complicado porq la interface q estoy construyendo gestiona mensajes para un sistema q ya esta en funcionamiento actualmente y solo cuento con un api predefinida para realizar las consultas asi q no se cuales son las imagenes hasta q realizo la consulta ayax; posteo a continuacion algunas soluciones con las q he experimentado por si a alguien le sirve:

precarga directa de imagenes

preloadImages:function(args)
{
result=this.content.indexOf(args.searchvalue,args. fromindex);

if(result!=-1 )
{
end=this.content.indexOf(' ',result);
src=this.content.substring(result+5,end-1);
args.max++;
args.fromindex=end;
img=new Image();
img.onload=function(){this.preloadImages(args);}.b ind(this);
img.onerror=function(){this.preloadImages(args);}. bind(this);
img.src=src;
}else
{
args.callback();
}

},
despes de la consulta ajax llamo a este metodo con los siguientes argumentos:

args.searchvalue='src='// el atributo src de la img
args.fromindex=0;// el indice en la cadena response text desde la q se realiza la busqueda
args.callback= function //funcion q se ejecuta al terminar la precarga

Esta funcion funciona recursivamente cargando todas las imagenes a las que se hace referencia en resposeText de la consulta ajax; notese q la llamada recursiva solo se realiza cuando la imagen esta completamente cargada mediente el evento onload, asi me aseguro q al renderear el resultado final todas las imagenes estan cargadas.

[caricatos]

Hola:

La verdad es que dejé de hacer precargas en memoria porque no son demasiado fiables, te recomiendo que programes el evento load de los tags img, por ejemplo acualizando un contador, y ejecutar tu scroll cuando ese contador termine su cuenta...

Saludos