CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
wesslayneb
wesslayneb

Reputation: 47

Masonry if images loaded

I am currently using the below code to load the jQuery masonry after all the images have loaded. It works great and as it should. However, if I am loading a large number of images it takes some time to show the masonry. I have tried multiple method to display a sort of loading image to show that the page is actually loading and is not just stagnant with no success. If anyone could please point me in the proper direction as to how to maybe use an if statement to check if the images are loaded. While they are not I would like to display the loading gif. Once they do load I would like to have the masonry appear. 

var $container = $('#freewall').imagesLoaded( function() {
  $container.isotope({
  });
});

Sorry to over complicate a simple issue. But I greatly appreciate any help that I can get!

Upvotes: 1

Views: 1097

Answers (1)

Magnus
Magnus

Reputation: 153

I would recommend to show each image individually as soon as it loads, instead of waiting for the complete set of images

in other words, your HTML would be something like this:

<div class="grid">
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
</div>

then with CSS hide your images, with something like this:

.item img {
   display: none;
}

next initialize the grid with isotope:

$('.grid').isotope({
    itemSelector: '.item',
    percentPosition: true,
});

and finally show the images that are getting loaded individually with the help of imagesLoaded, like this:

$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
    $(imageObj.img).fadeIn(300);
    $('.grid').isotope('layout');
});

I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 which already deals with all of this for me

Upvotes: 2

Related Questions