Preloader before Lightgallery, isotope using Imageloaded

问题

I'm using LightGallery to showcase my portfolio and isotope to filter the categories. As my images are in high quality I'm trying to use ImageLoaded but not able to achieve, still learning jQuery. I want the ImageLoaded to load the images in the background while a preloader(css or gif) is displayed and when its done loading give an entrance to the image like a zoom-in. My 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('*','')
            });
        });
  });

This is the code I'm trying to work with. Its not yet complete, but I'm stuck and don't know the next step. Also its not animating.

Please Help, Thank you.

回答1:

You lost the initialization of $.lightGallery() so added that. Added a preloader that I fade out after isotope runs. I'm also hiding #gallery with opacity: 0; and fading that in when isotope is done loading. Writing something that would "zoom" your images in would be somewhat tricky so I'll leave that up to you. http://codepen.io/anon/pen/pRwEXg

来源：https://stackoverflow.com/questions/41810492/preloader-before-lightgallery-isotope-using-imageloaded