[APORTE] Sencillo chequeo de imagenes [ACTUALIZADO]

[TrinityCore]

[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:

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

¿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!

[ArturoGallegos]

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

<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>

[TrinityCore]

Muy bueno la verdad!

Es que soy nuevo en el tema de "manipulacion de imagenes", por lo que fue la salida mas sencilla que se me ocurrio para no dejar al usuario en plan ¿Carga o no carga...?.

Intentare hacer la adaptacion con lo que dices, indagare mas a profundidad para sacar el maximo provecho que se pueda.

Gracias por responder :D