O DOM e problemas em mostrar uma imagem...

[Guest id194]

Estou a tentar mostrar um pequeno texto e uma imagem animada assim que o utilizador pressionar o botão de um formulario que irá enviar um ficheiro para o servidor atraves de PHP, no meu script nzFotolog. E estou com uns problemas a usar o DOM, javascript não é o meu forte, mas lá vou dando uns toques... Imaginem que estão a enviar um ficheiro grande e ainda irá demorar uns segundos (ou minutos) a enviar o ficheiro para o servidor. Durante esse tempo pretendo mostrar um pequeno popup no centro da pagina a notificar o utilizador que algo esta a ser enviado para o servidor e juntamente com um gif animado. Tudo isto esta definido no css.

Eu tenho a função SubmitTest() associada ao click do botão que submete o form e esta função irá devolver "verdadeiro" para o form ser submetido, se for devolvido "falso" o form não será submetido (já vão entender para que disse isto).

A função é a seguinte:

function SubmitTest() {
var W3CDOM = (document.getElementsByTagName && document.createElement);
var message = document.forms['newimage'].elements['upmessage'].value;

if (W3CDOM) {
	/*var upImg = document.createElement('img');
	upImg.setAttribute("src", "uploading.gif");*/

	var upDiv = document.createElement('div');
	upDiv.id = "popup-uploading-bg";
	upDiv.innerHTML = "<div id=\"popup-global-msg\">" + 
					  "<div class=\"popup-icon\">" +
					  "<img src=\"uploading.gif\" height=\"32\" width=\"32\" alt=\"\" /></div>" +
					  "<div class=\"popup-text\">" + message + "<\/div>" +
					  "</div>";

	var loadDiv = document.getElementById('popup-loader-bg');
	document.body.insertBefore(upDiv, loadDiv);
}

return true;
}

Este código está quase a funcionar na totalidade... Imaginem que no fim em vez de retornar "verdadeiro", retorno "falso", o form não irá ser submetido. Neste caso particular, a função funciona a 100%, mas se retornar "verdadeiro", que é o que pretendemos obviamente, a função não funciona totalmente. O que falha é a imagem. Não sei porquê, mas a imagem não é carregada.

Imaginem que a cache do browser está limpa. Se eu submeter o form, o meu popup irá parecer conforme o design especificado no css, a mensagem também irá aparecer, mas a imagem não foi carregada. Se eu abrir a imagem no browser directamente, carregando assim a imagem para a cache e posteriormente submeter o form, a imagem já sera disponibilizada mas não irá ser animada. Apenas permanece um frame fixo dela e não anima.

Foi aqui que pensei no seguinte... Estão a ver o codigo comentado na função? Tentei adicionar esse simples codigo que irá pré-carregar a imagem a ser mostrar, claro que o codigo n estava comentado, mas mesmo assim, não funciona, os resultados eram exactamente os mesmos.

Já tentei também o seguinte:

1) Criar a imagem usando o DOM em vez de simplesmente adicionar o HTML. Não resultou.

2) Usar a função no evento onSubmit do form em vez do onClick do botão de submissão. Não resultou.

Não consigo entender qual o problema aqui, será que existe por ai algum guru de DOM/JavaScript que me possa ajudar com este problema ou será que vou ter de esquecer esta ideia?

[Guest id194]

eskeçam, ja resolvi... não como queria. usei uma tecnica completamente diferente sem usar o DOM tão avançado.