Preloader before Lightgallery, isótopo usando Imageloaded

Estoy usando LightGallery para mostrar mi cartera e isótopo para filtrar las categorías. Como mis imágenes son de alta calidad, bash usar ImageLoaded pero no puedo lograrlo, aún estoy aprendiendo jQuery. Quiero que ImageLoaded cargue las imágenes en el fondo mientras se muestra un preloader (css o gif) y cuando está listo para cargar, da una entrada a la imagen como un zoom. Mi Codepen

$(document).ready(function() { var $gallery = $('#gallery'); var $boxes = $('.revGallery-anchor'); $boxes.hide(); $gallery.imagesLoaded( function() { $boxes.fadeIn(); $gallery.isotope({ // options sortBy : 'original-order', layoutMode: 'fitRows', itemSelector: '.revGallery-anchor', stagger: 30, masonry: { columnWidth: 200 } }); }); $('button').on( 'click', function() { var filterValue = $(this).attr('data-filter'); $('#gallery').isotope({ filter: filterValue }); $gallery.data('lightGallery').destroy(true); $gallery.lightGallery({ selector: filterValue.replace('*','') }); }); }); 

Este es el código con el que trato de trabajar. Todavía no está completo, pero estoy atascado y no sé el siguiente paso. También no está animando.

Por favor ayuda, gracias.

$.lightGallery() la inicialización de $.lightGallery() así que agregaste eso. Agregué un preloader que me fundí después de que se ejecuta el isótopo. También estoy ocultando #gallery con opacity: 0; y desvaneciéndolo cuando el isótopo está listo para cargarse. Escribir algo que “acerque” tus imágenes sería un poco complicado, así que te lo dejo a ti. http://codepen.io/anon/pen/pRwEXg