Problema al insertar imagen con javascript

[aguila_393]

Tengo una div en la cual al presionar un boton se agrega una imagen y un texto. El codigo es el siguiente:

Código Javascript:

var divProgress = document.getElementById('progress');
    divProgress.innerHTML = '<img src="ajax-loader.gif"/><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/>';
 

y tengo una div llamado progress, el tema es que funciona bien, se agrega el texto, y la imagen, pero la imagen no se muestra, es decir me doy cuenta que se agrego porque aparece en el codigo, pero no se muestra. Y la imagen esta subida al hosting en la misma carpeta que el index.

Este es el codigo que me genera:
<div id="progress">
<img src="ajax-loader.gif" name="progress"> <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></div>

como veran, deberia mostrar la imagen, pero solo es visible el texto. Alguien tiene idea porque puede ser que pase esto?

Saludos y gracias.

[AlejandroMtzRmz]

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:

<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

[yooom]

que varvaro nose que en que usaras eso pero me gustaria que des una idea que escript mas chulo pero me parece que nose en usarlo dime tu.

[WeSoRz]

Pese a que el código del amigo AlejandroMtzRmz puede ser útil para otros menesteres o para avanzar en nuevas cosillas, me temo que tu problema es un problema de rutas.
Podrías decirme en qué carpeta contienes ese código JS que ejecutas? Vamos, en qué carpeta está el fichero que contiene ese JS.
Piensa que aunque estés en index.php, si éste invoca a un javascript en la dirección "javascript/fichero.js", y es fichero.js el que contiene el código que pones para mostrar la imagen, intentaría cargarla de la ruta "javascript/imagen.jpg".
En el ejemplo que te comento, bastaría con llamar a la imagen con "../imagen.jpg".


Trabajar con rutas relativas sería lo ideal para no tener problemas de éste tipo :)

[esjuanma]

Wesorz, creo que estás equivocado, no importa en que carpeta esté el archivo Javascript, lo que importa es donde ese el html o php y la imágen.
Si el HTML esta en la misma carpeta que la imágen, la forma correcta de llamar al gif es src="ajax-loader.gif"

[WeSoRz]

Iniciado por esjuanma

Wesorz, creo que estás equivocado, no importa en que carpeta esté el archivo Javascript, lo que importa es donde ese el html o php y la imágen.
Si el HTML esta en la misma carpeta que la imágen, la forma correcta de llamar al gif es src="ajax-loader.gif"

En efecto, llevas razón (que lo edite algún moderador para no confundir, por favor). Fue ida de cabeza mía, al confundir eser problema con el CSS, donde la ruta si es relativa a la hoja de estilo.

Aún así, sigo pensando que es un problema de rutas. Sería tan fácil como cambiar ajax-loader.gif por el nombre del fichero que ejecuta ese JS, a ver si realmente se muestra la imagen. Por ejemplo, si debería mostrarse en http://localhost/index.php, probar poniendo http://localhost/ajax-loader.gif.

Otra solución opción para descartar problemas de rutas es comprobar los logs del Apache a ver si tenemos algún 404 con esa imagen.

[aguila_393]

Compañeros ya pude solucionar el problema. No se bien porque sucedio pero el tema era que tenia que cargar la imagen al momento de cargar toda la web, asique lo que hice fue crear un div con visibilty hidden y ahi cargar la imagen, y despues ya funciono con exactamente el mismo codigo que tenia yo.

Alguien sabe si siempre hay que hacer esto o porqeu podria pasar?