Como monitorar uma fonte de imagem para status totalmente carregado
Estou carregando um grande número de imagens em um DIV dinâmico e estou usando um pré-carregador para obter as imagens.
imageObj = new Image();
imageObj.src = imgpath + imgname;
Cada um desses eventos cria um GET que eu posso ver e monitorar no Firebug.
Se eu souber o nome e o caminho de uma imagem, posso assistir ao relevante XMLHttpRequest para ver se o GET foi concluído?
Eu não quero confiar (ou usar) .onload eventos para este processo.
O pseudo seria algo como isto ...
if (imageObj.GET = 'complete')
Alguém já teve alguma experiência com isso?
EDITAR 1
Graças à ajuda de Bart (veja abaixo) eu mudei meu preloader de imagem para armazenar uma matriz dos objetos de imagem ...
function imagePreLoader(imgname) {
images[imgnum] = new Image();
images[imgnum].src = imgpath + imgname;// load the image
imgnum ++;
}
E então, depois que todas as minhas outras funções foram executadas para criar os DIVs de conteúdo, usei o atributo image.complete no seguinte ...
var interval = setInterval(function () {
imgcount = imgnum - 1; // because the imgnum counter ++ after src is called.
ok = 1;
for (i=0; i<imgcount; i++) {
if (images[i].complete == false){
ok = 0;
}
}
if (ok == 1) {
clearInterval(interval);
showIndexOnLoad();
}
}, 1000);
Isso aguarda até que todas as imagens estejam completas e só acioneshowIndexOnLoad()
função quando eu obtiver o 'ok' da função de intervalo.
Todas as imagens agora aparecem como eu queria, de uma só vez, sem esperas adicionais para os GETs alcançarem.
Bem feito Bart por me colocar noimage.complete atributo.