Usando AJAX / jQuery para actualizar una imagen

Esta es probablemente una pregunta simple, pero estoy perplejo y simplemente no sé por dónde empezar.

Tengo un script PHP (image_feed.php) que devuelve una URL a una imagen. Cada vez que se llama a este URL, devuelve la última imagen disponible (la imagen cambia cada dos segundos).

Lo que quiero que suceda es que cuando se carga la página, hay una llamada AJAX a image_feed.php, que devuelve la última url. Este URl se inserta luego en HTMl reemplazando la imagen apropiada src.

Después de 5 segundos, quiero que el proceso se repita y que la imagen se actualice. Sin embargo, no quiero que la imagen se intercambie hasta que haya terminado de cargarse, y quiero evitar que aparezca un espacio en blanco antes de que se cargue la nueva imagen.

Por el momento tengo el siguiente jQuery, que simplemente carga el valor de retorno de image_feed.php directamente en un div llamado # image1. image_feed.php está formateado correctamente para proporcionar una etiqueta de imagen html.

$(document).ready(function(){ var $container = $("#image1"); $container.load('image_feed.php?CAMERA_URI=') var refreshId = setInterval(function() { $container.load('image_feed.php?CAMERA_URI='); }, 5000); }); 

Esto funciona, pero hay un problema. Obtengo un espacio en blanco del tamaño de la imagen en IE y Firefox cada vez que la imagen se actualiza, porque la imagen tarda un tiempo en descargarse.

Sé que lo que necesito es que image_feed.php devuelva la URL simple a la imagen. A continuación, uso jQuery para solicitar esta URL, precargarla y luego cambiarla por la imagen existente.

Sin embargo, todavía estoy luchando por llegar a algún lado. ¿Podría alguien ser tan amable de darme algunos consejos / ayuda?

 $(document).ready(function() { var $img = $('#image1'); setInterval(function() { $.get('image_feed.php?CAMERA_URI=', function(data) { var $loader = $(document.createElement('img')); $loader.one('load', function() { $img.attr('src', $loader.attr('src')); }); $loader.attr('src', data); if($loader.complete) { $loader.trigger('load'); } }); }, 5000); }); 

No probado. El código anterior debe cargar la nueva imagen en segundo plano y luego establecer el atributo src de la imagen anterior en carga.

El controlador de eventos para la carga se ejecutará solo una vez. La verificación completa es necesaria para los navegadores que pueden haber guardado en caché la imagen que se va a cargar. En tales casos, estos navegadores pueden o no activar el evento de load .

Usted puede. Cuando desee volver a cargar algo, puede anexar una consulta de búsqueda para que actualice el origen.

Por ejemplo, cuando hay una imagen que cambia con frecuencia (por ejemplo, captcha) y desea volver a cargarla, sin actualizar el navegador, puede hacerlo de esta manera:

Código inicial:

 captcha 

Código actualizado:

 captcha 

El script utilizado aquí sería simplemente:

 var d = new Date(); $('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds()); 

¡Espero que esto ayude! 🙂

Considere, si tiene que recuperar la URL nuevamente del servidor, para una nueva URL de imagen, puede hacerlo de esta manera:

 $.ajax({ url: 'getnewimageurl.php', success: function(data) { $('img').attr('src', data); } }); 

El servidor debe devolver solo un nuevo nombre de imagen en él. Por ejemplo, el código PHP debe ser de esta manera:

  

Le sugiero que use el complemento jQuery ‘onImagesLoad’ Esto le proporciona una callback cuando una imagen ha terminado de cargarse.

Cuando reciba una nueva URL de imagen del servidor, cree un nuevo object con src="new_url_from_server" y adjunte 'onImagesLoad' callback de 'onImagesLoad' . Cuando se llama a su callback, su imagen ha terminado de descargarse.

Ahora puede simplemente reemplazar el atributo 'src' del antiguo objeto img con new_url_from_server. Como la nueva imagen ya está disponible en la memoria caché, no se volverá a descargar y se mostrará inmediatamente.

Aleatoriamente, puede ocultar la imagen anterior y agregar esta nueva imagen a DOM (no es necesario si el anterior funciona correctamente)

Algunas muestras de huesos desnudos podrían ser así: