Autor Tema: Imágenes parpadeando, ayuda!  (Leído 1732 veces)

Desconectado Atrix

  • PHPer@
  • **
  • Mensajes: 69
  • Karma: 2
  • Sexo: Masculino
  • Ah..?
    • Ver Perfil
Imágenes parpadeando, ayuda!
« en: 02 de Julio de 2012, 19:30:09 pm »
Buenas, antes de todo gracias por revisar mi tema. Mi incomodidad, es que tengo un sistema que ilustra textos y varias imágenes que están alojados en otro archivo distinto al que quiero trabajar. En el archivo que quiero trabajar, con ayuda de jQuery, incluyo el contenido del otro archivo que contiene las imágenes y los textos haciendole un intérvalo de tiempo determinado para que se mantenga actualizado.

Pero, al hacer esto, las imágenes "Parpadean", tengo la sospecha que es por el archivo PHP que las dibuja (Las imágenes son literalmente obtenidas de Habbo.es, osea, kekos).

El código del JavaScript



function cargar() { 

$(&
#39;div#shoutbox&#39;).load("<?=SITE;?>community/show_chat");

}

setInterval("cargar()", 1200);


Comunidad PHPeros

Imágenes parpadeando, ayuda!
« en: 02 de Julio de 2012, 19:30:09 pm »

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Imágenes parpadeando, ayuda!
« Respuesta #1 en: 02 de Julio de 2012, 19:38:44 pm »
HTML5 permite el manejo de cache...
Twitter: @JoakoM010



Desconectado Atrix

  • PHPer@
  • **
  • Mensajes: 69
  • Karma: 2
  • Sexo: Masculino
  • Ah..?
    • Ver Perfil
Re:Imágenes parpadeando, ayuda!
« Respuesta #2 en: 06 de Julio de 2012, 23:43:07 pm »
HTML5 permite el manejo de cache...

Disculpen (Revivir tema), pero.. ¿Bastaría con manifestar el manejo de caché al archivo PHP que genera la imágen sin especificar las variables GET?

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Imágenes parpadeando, ayuda!
« Respuesta #3 en: 07 de Julio de 2012, 05:04:37 am »
La caché no te servirá para esto, puesto que lo que quieres es que la imagen se actualice cada poco tiempo.

El problema del parpadeo, por lo que yo entiendo, es que estás eliminando la imagen anterior, luego cargas la imagen nueva y posteriormente dibujas la imagen nueva.
Esos milisegundos que toma cargar la imagen nueva es lo que hace que "parpadee".

Para solucionarlo tienes que cambiar el orden:
Cargas la imagen nueva, y cuando esté cargada la cambias por la anterior.

Imagina este código HTML:
Código: [Seleccionar]
<div id="shoutbox">
   <img src="..." alt="..."></img>  <- TU IMAGEN ANTERIOR
</div>

Y utilizar un codigo jquery como el siguiente
Código: [Seleccionar]
$("<img />").attr('src','<?=SITE;?>community/show_chat').load(function() {
     // AQUI VA EL CODIGO QUE PASA CUANDO LA IMAGEN YA ESTA CARGADA, POR EJEMPLO
     $('#shoutbox').html("");
     $('#shoutbox').append($(this));
});

Una cosa por el estilo de eso debería funcionar.

Me he ayudado un poco de este blog, alomejor a ti tambien te sirve:
http://jquery-howto.blogspot.com.es/2009/02/preload-images-with-jquery.html

Ya nos contaras que tal te ha ido,
Un saludo!
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Imágenes parpadeando, ayuda!
« Respuesta #4 en: 07 de Julio de 2012, 05:08:16 am »
La caché no te servirá para esto, puesto que lo que quieres es que la imagen se actualice cada poco tiempo.

El problema del parpadeo, por lo que yo entiendo, es que estás eliminando la imagen anterior, luego cargas la imagen nueva y posteriormente dibujas la imagen nueva.
Esos milisegundos que toma cargar la imagen nueva es lo que hace que "parpadee".

Para solucionarlo tienes que cambiar el orden:
Cargas la imagen nueva, y cuando esté cargada la cambias por la anterior.

Imagina este código HTML:
Código: [Seleccionar]
<div id="shoutbox">
   <img src="..." alt="..."></img>  <- TU IMAGEN ANTERIOR
</div>

Y utilizar un codigo jquery como el siguiente
Código: [Seleccionar]
$("<img />").attr('src','<?=SITE;?>community/show_chat').load(function() {
     // AQUI VA EL CODIGO QUE PASA CUANDO LA IMAGEN YA ESTA CARGADA, POR EJEMPLO
     $('#shoutbox').html("");
     $('#shoutbox').append($(this));
});

Una cosa por el estilo de eso debería funcionar.

Me he ayudado un poco de este blog, alomejor a ti tambien te sirve:
http://jquery-howto.blogspot.com.es/2009/02/preload-images-with-jquery.html

Ya nos contaras que tal te ha ido,
Un saludo!

Lo decía por que tengo la leve casualidad de que Atrix habla de un chat...
Twitter: @JoakoM010



Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:Imágenes parpadeando, ayuda!
« Respuesta #5 en: 07 de Julio de 2012, 05:12:30 am »
Lo decía por que tengo la leve casualidad de que Atrix habla de un chat...

Tienes razón, parece un chat, la cache puede ayudarle con algunas imágenes (que ya debería hacerlo el mismo navegador), pero no creo que solucione el problema.
Lo que tiene que hacer es cargar el archivo completamente antes de ponerlo en pantalla.
La solución que he puesto se aplica para cargar 1 imagen (solo una) pero igual puedes seguir investigando y hacerlo con el archivo al completo.

Un saludo!
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es