Foros del Web » Programando para Internet » Jquery »

[APORTE] Sencillo chequeo de imagenes [ACTUALIZADO]

Estas en el tema de [APORTE] Sencillo chequeo de imagenes [ACTUALIZADO] en el foro de Jquery en Foros del Web. [ACTUALIZADO] - 14/01/2018-12:20 Ahora las imagenes son comprobadas individualmente todas juntas y no una por una, ya que de esa manera es posible que mostrando ...
  #1 (permalink)  
Antiguo 13/01/2018, 17:41
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 377
Antigüedad: 2 años, 5 meses
Puntos: 9
[APORTE] Sencillo chequeo de imagenes [ACTUALIZADO]

[ACTUALIZADO] - 14/01/2018-12:20
Ahora las imagenes son comprobadas individualmente todas juntas y no una por una, ya que de esa manera es posible que mostrando en una galeria un total de 20 imagenes por defecto, esta compruebe imagenes que ya podrian haber sido cargadas.

De esta manera, las imagenes son comprobadas en "tiempo real"


# -- ------------------------------------------------------------------------------------------------------------------------------------------------ --#


Hola gente, espero esten bien.

Les traigo un pequeño script que desarrolle para hacer un efecto "Preload" de imagenes para galerias o simplemente para el tipico "visualizador" de las webs en donde nos muestra que la imagen carga y si esta disponible o no.

Bueno, la verdad es que este script se puede adaptar de muchas maneras, ami por ejemplo, me sirve ya que mediante PHP obtengo URLS y las compruebo con este scripts como pueden ver en esta imagen:



Claramente en el contenedor donde voy a mostrar la imagen muestro el loading hasta que el script me de el okay luego en ese mismo contenedor con jquery css() pondria el URL de la imagen, y en caso de que no me de el okay pondria una URL de imagen de error o un mensaje...

Una de las maneras en que lo uso, es la siguiente.
Código PHP:
Ver original
  1. <?php
  2. // Imagenes que obtendriamos desde nuestra base de datos.
  3. $MyArray = array(
  4.     array("id" => 1, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/001.jpg"),
  5.     array("id" => 2, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/002.jpg"),
  6.     array("id" => 3, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/003.jpg"),
  7.     array("id" => 4, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/004.jpg"),
  8.     array("id" => 5, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/005.jpg"),
  9.     array("id" => 6, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/006.jpg"),
  10.     array("id" => 7, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/007.jpg"),
  11.     array("id" => 8, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/008.jpg"),
  12.     array("id" => 9, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/009.jpg"),
  13.     array("id" => 10, "url" => "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/010.jpg")
  14. );
  15. // Bucle para recorrer cada una de estas.
  16. for($i = 0; $i < count($MyArray); $i++){
  17.     $id = $MyArray[$i]["id"];
  18.     $imageSuccess = $MyArray[$i]["url"];
  19.     $imageFailed = "http://customizacion-wow.esy.es/CustomLibs/CheckingImage/images/error.jpg";
  20.     $content = ".image-box#$id";
  21.     echo "
  22.     <div class='image-box' id='$id'><div class='text'>Loading Image...</div></div>
  23.     <script>
  24.         var image$id = new Images();
  25.         image$id.ImageList.push({url: '$imageSuccess', content: '$content', error: '$imageFailed'});
  26.         image$id.prepare(setInterval('image$id.checking()', 150));
  27.     </script>
  28.     ";
  29. }
  30. // #1 -- Creamos una instancia para poder usar las que querramos sin problemas, siempre y cuando no repitamos nunca el ID.
  31. // #2 -- Añadimos la imagen a nuestro array con sus datos, en mi caso 3 datos.
  32.     // #2.1 -- La URL de la imagen que debe ser comprobada.
  33.     // #2.2 -- El contenedor en donde se mostrara la imagen una vez sea comrpobada.
  34.     // #2.3 -- La URL de la imagen de error, imagen que mostrara si el paso #2.1 falla.
  35. // #3 -- Iniciamos el checkeo pasando un intervalo por parametro.
  36. // #4 -- image$id.checking() es el metodo de la instancia que creamos, quien comprobara las imagenes.
  37. // #5 -- image$id.CheckingTime es una propiedad de la clase que contiene el tiempo, indicando cada cuentos MS (milisegundos) se comprobara la imagen.
  38.  
  39. // De esta manera uso la clase en diferentes partes de mi web, con diferentes datos intentando no tener que rediseñar nada.
  40. ?>

¿se capta la idea?

Aqui les dejo el demo: http://customizacion-wow.esy.es/Cust.../CheckingImage

Aqui les dejo el source: http://customizacion-wow.esy.es/CustomLibs/CheckingImage/source.js

ACLARACION IMPORTANTE

Quiero aclarar para algunas personas, porque puede que no todos entiendan esto...
Esta clase esta desarrollada para adaptarla en, por ejemplo, una galeria de imagenes.
No crean que solo descargan y ya quieran que esto funcione, esto es asi, ya que cada quien tendra su manera de hacer las cosas y no me parecio correcto, o mas que nada util hacer la libreria para que funcione de una manera determinada, ya que forzaria a las personas a dos cosas:

1- Tener que adaptar su sistema al mio.
2- Tener que rediseñar la clase para adaptarlo a sus sistemas.

Por lo que crei que de esta manera, solo con unas lineas de codigos sencillas, podrian adaptar esta clase a sus sistemas de manera facil y rapida.

En fin, saludos!

Última edición por TrinityCore; 14/01/2018 a las 11:47
  #2 (permalink)  
Antiguo Hoy, 09:29
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.851
Antigüedad: 9 años, 10 meses
Puntos: 958
Respuesta: [APORTE] Sencillo chequeo de imagenes [ACTUALIZADO]

Esta padre tu idea, y la verdad muchas gracias por compartir.

Pero aquí va el pero (quizás este equivocado), hasta donde yo se el navegador guarda automáticamente el contenido de tu sitio en cache, solo tienes que indicarle que quieres que guarde y por cuanto tiempo.

Con eso basta para que la próxima vez que visites el mismo sitio primero compruebe la chace y solo hara las peticiones del contenido que no tenga.

Creo yo que te hubieras ahorrado dolores de cabeza si hubieras usado en tu htaccess (yo uso apache) algo como esto

Cita:
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
ExpiresActive On
</ifModule>

<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....



La zona horaria es GMT -6. Ahora son las 17:45.