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?