[SOLUCIONADO] Problema con preload Jquery de imagenes

[elmouse19]

Buenas. Antes que nada, gracias a todos los que colaboren con el tema.

Ahora a lo concreto. Trabajo en la programación de una web portfolio de fotografía, y para la carga de las imágenes que se muestran en el sitio, hice un pequeño scrip que usa jquery para ocultar las imagenes mientras estas se descargan y luego mostrar cada imagen que haya terminado de bajarse, de forma de individual para cada imagen.

El problema es que en algunas ocasiones el script parece fallar y algunas imágenes no se muestran por mas que hayan terminado de descargarse. Y principalmente esto pasa cuando luego de haber entrado por primera vez al sitio. Podría estar relacionado con el cache o algo así.

Pero la verdad es que le di mil vueltas y no encuentro el error, o problema.

Dejo el codigo.

HTML & PHP

Código HTML:

<div class="photos">
	<a href="estudio/server/php/files/<?php echo $row['name']; ?>" data-lightbox="example-set" data-title="<?php echo $row['titulo_foto']; ?>">
		<img class="photo" id="id_<?php echo $row['id_foto']; ?>" src="estudio/server/php/files/<?php echo $row['name']; ?>" />
		<div id="facebookG">
		   <div id="blockG_1" class="facebook_blockG"></div>
		   <div id="blockG_2" class="facebook_blockG"></div>
		   <div id="blockG_3" class="facebook_blockG"></div>
		</div>
	</a>
</div> 

Código Javascript:

$( document ).ready(function() {
    showDiv();
    fixlightbox();
});
// Show Divs
function showDiv() {
    $('.photos a img').load(function(){
        $(this).fadeIn(600);
        $(this).next().fadeOut(0);
        exe_masonry();
    });
}
 

Lo que falla es el fadeIn en la funcion showDiv(). Nunca se hace. Pero en los distintos debugers que hay para codigo, ninguno me indica un error concreto cuando pasa. Entonces no descubro cual es el problema.

Ah, otro dato llamativo es, que esto pasa más seguido en Google Chrome que en otros navegadores.

Gracias de nuevo a todos los que ayuden.
Saludos.

[elmouse19]

Alguien tiene alguna idea? Yo continuo buscando, pero nada.

[Alexis88]

Podrías probar con este script. Utiliza código JavaScript nativo (con lo cual evitarás cargar toda una librería) y hace lo que buscas.

Saludos

[elmouse19]

Hola. Gracias por el concejo.

Lo he intentando, pero me trae problemas con el plugin masonry, que acomoda el espaciado entre las imagenes.

Las imagenes se posicionan una sobre otra.

[elmouse19]

Al final lo resolví usando LazyLoad, y agregando esto a la función, para corregir el problema de Mansonry:

Código Javascript:

$( document ).ready(function() {
        $("img.lazy").lazyload({
            effect : "fadeIn",
            threshold : 200,
            load: function() {
                        exe_masonry();
            }
        });
    });
 

exe_masonry() es una función que se ejecuta mas adelante en el código para llamar a la ejecución de Mansory.

Saludos, y gracias por la ayuda.