Llenar innerHTML cuando todo esté cargado

Heiroon · #1 (**permalink**) 24/04/2012, 12:45

Buenas gente!

tiempo sin preguntar por acá (supongo que eso es bueno

)

Bueno, mi consulta es la siguiente: Resulta que quiero que al ejecutar un httpRequest, no me llene el div contenedor, hasta que TODO el contenido este cargado. A ver si me puedo explicar mejor...

Ejecuto un httpRequest, y este me devuelve una tabla q tiene una imagen dentro, resulta que no quiero que reemplaze la imagen que esta en el div, hasta que la nueva imagen esté cargada y de esta manera no se pierda en ningun momento la imagen de la tabla.

Como podria hacer esto, tomando en consideración que estoy programando para móviles y no quiero/puedo usar jQuery.

Saludos. Espero su pronta respuesta!

IsaBelM · #2 (**permalink**) 24/04/2012, 13:56

puedes usar la propiedad complete. esta te retorna true o false. a partir de aquí es usar la inventiva

Heiroon · #3 (**permalink**) 24/04/2012, 15:30

A ver... Gracias IsabelM! Se ve que puede ser útil el atributo que me dices... pero no hayo como implementarlo...

Código Javascript:

Ver originalxmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && (xmlhttp.status == 200 || window.location.href.indexOf ("http") == - 1))
            {
                
                if(img.complete)
                {
                    document.getElementById('map_container').innerHTML = xmlhttp.responseText;
                }
            }
        };

Porque cuando verifico en la linea del if(img.complete), toma la imagen que esta antes y es como si no hiciera nada... Necesito verificar la imagen que viene nueva en xmlhttp.responseText, pero no se como hacerlo. Ayuda por favor!!!

IsaBelM · #4 (**permalink**) 26/04/2012, 14:41

la idea es esta

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function fnc() {

var nueva_img = document.createElement('img');
nueva_img.src = 'http://r0k.us/graphics/kodak/kodak/kodim01.png?cache=' + +new Date();
nueva_img.alt = 'nueva';
document.getElementById('cont_img').appendChild(nu eva_img);

nueva_img.addEventListener('load', function() {
alert('cargada');
document.getElementById('antigua').style.display = 'none';
document.getElementById('cont_img').style.display = 'block';
}, false);

}
</script>
</head>
<body>

<form>
<input type="button" onclick="fnc()" value="cargar nueva imagen" />
</form>

<img src="http://jonlabiano.files.wordpress.com/2010/06/normal_daniela20rojas.jpg" id="antigua" />
<div id="cont_img" style="display: none;"></div>

</body>
</html>

Heiroon · #5 (**permalink**) 30/04/2012, 10:40

IsaBelM eres grande!

era exactamente lo que necesitaba... Muchas gracias!