Images not loading completely

[Snakzi]

I'm using masonry to show a grid of images which sometimes have an resolution of 1920x1080 but they're not loading completely. I cant provide a codepen but I'll provide a screenshot and my code.

Screenshot: https://i.imgur.com/ld6HG5I.png Code:

$( document ).ready(function() { var $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, isResizable: true, transitionDuration: '0.8s', isAnimated: true }); });

HTML CODE: `

            @foreach($posts as $post)
            <div class="col-sm-4 grid-item padding-fix">
              <img src="{{ $post->post_url }}" class="img-fluid">
              <span class="badge badge-success badge-game-mobile">{{ $post->game }}</span>
              <div class="img-caption">
                <div class="img-caption-author">
                  <span class="badge badge-success badge-game">{{ $post->game }}</span>
                  <div class="img-caption-bottom">
                    <img class="img-caption-author-img rounded-circle" src="img/odd.png"/>
                    <span class="author-text">{{ $post->creator }}</span>
                    <a href="#" class="btn btn-light float-right btn-comment"><i class="fa fa-comment"></i></a>
                    <a href="#" class="btn btn-light float-right btn-like"><i class="fa fa-heart"></i></a>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>`

Images getting loaded from Amazon S3 service, when I put them inside my own server it works as expected. So I'm not sure if it has to do with S3 or masonry not loading correctly from third party servers?

[Snakzi]

I've found a solution.

Step 1: Implement imagesLoaded script https://imagesloaded.desandro.com/

Step 2: var $grid = $('.grid').imagesLoaded( function() { // init Masonry after all images have loaded $grid.masonry({ // options... }); });

source: https://stackoverflow.com/questions/40130622/masonry-with-asynchronous-picture-loading