Tema: [APORTE] Sencillo chequeo de imagenes [ACTUALIZADO]
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/01/2018, 17:41
TrinityCore
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 424
Antigüedad: 9 años, 4 meses
Puntos: 12
[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