javascriptjquerypreloadingimage-preloader

Preload images with Justified Gallery

I am using Justified-Gallery to layout my gallery thumbnails. I want to implement a preloader so the images only show once they have been formatted by Justified-Gallery.

I saw this option in the plugin but I couldn't get it to work, waitThumbnailsLoad.

Currently I am hiding the div containing the thumbnails, and then showing it once the plugin has completed. Is this the best way or is there a better way to do this?

HTML

<div id="justify-gallery" class="hidden">
  // thumbnails go here
</div>

JS

// Justify Gallery
$("#justify-gallery").justifiedGallery({
    rowHeight: 100,
    fixedHeight: true,
    captions: false,
    margins: 3,
    lastRow: 'nojustify'
});

$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
    $(this).fadeIn();
});
Solution

  • Oh boy, on a second visit to the site I found an article on performance; where it states if you add a class of .justified-gallery it will only show the thumbnails once loaded. In all fairness this vital info should have been put in a more prominent spot.

    http://miromannino.github.io/Justified-Gallery/performance-tips/