CODEWITHSUNDEEP
javascriptjquerypreloadingimage-preloader
Clinton Green
Clinton Green

Reputation: 9977

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();
});

Upvotes: 0

Views: 1646

Answers (2)

Clinton Green
Clinton Green

Reputation: 9977

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/

Upvotes: 0

Sergio Alen
Sergio Alen

Reputation: 724

Yes you're in the right track, if your current code sort of works, then you can add a parent container to the hidden class, and add a loading animation to it, then use css to position absolute the images or hide the loader, up to you.

<div class="parent-with-loading-animation">
  <div class="loading-animation"></div>
  <div id="justify-gallery" class="hidden">
    // thumbnails go here
  </div>
</div>

Just give the parent div a min-height of whatever you reckon would be the average height of images and a width 100% depending on your layout of course.

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

Upvotes: 1

Related Questions