Y si en lugar de innerHTML usas createElement y appendChild? revisa este codigo, lo probe y funciono bien (use el logo de google como imagen):
Código Javascript
:
Ver original<script>
function gen(){
var divProgress = document.getElementById('progress');
var imagen = document.createElement('img');
var texto = document.createElement('span');;
imagen.setAttribute('src','http://www.google.com/images/logos/ps_logo2.png');
imagen.setAttribute('id','ajaxLoader');
texto.innerHTML = '<br/>EL proceso de carga puede durar varios minutos.<br/> (aprox. 1 minuto por imagen, aunque puede variar dependiendo de la conexion a internet. No cierre la pagina.<br/>';
// la siguiente condicion es para que no se agregue otra imagen si se vuelve a dar click en el boton
if(document.getElementById('ajaxLoader') == undefined){
divProgress.appendChild(imagen);
divProgress.appendChild(texto);
}
}
</script>
<button onclick="gen()">Click</button>
<div id="progress"></div>
O tambien puedes simplemente cambiar el fondo de "progress" por ajax-loader.gif