List of Blogs Snippet on Homepage Don’t Load Properly

[PrinterzPk]

The list of blog snippets below the Slick Slider don’t load properly and seems to overlap vertically when page is loaded. This does not happen consistently but is reproducible when tried a few times.

I have been able to reproduce it on the demo/live preview (demo.themefisher.com/parsa/). I have also run the blog locally (Jekyll version) on my machine and I was able to reproduce the same issue. This issue occurs more frequently on the locally hosted version (I did not modify anything in the code but did add a few blog posts with variable size images).

To reproduce it (live demo and locally), I loaded the home page and then scrolled down to a position where Slick Slider images/featured blog posts are not visible. Then I did (on Windows) F5 and CTRL F5 a few times. I repeated this step a few times by scrolling further down and was able to reproduce this issue.

Following are the screenshots which show the bug being described. The screenshots were taken on the live preview.

Thanks for your help and support.

[once0101]

1. In the Default.html file, add the following line before the masonry script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

2. In the assets/js/script.js file, replace the code under the "// Masonry section" comment with the following code:

  // Masonry
$(document).ready(function () {
  $('.masonry-container').imagesLoaded( function() {
    $('.masonry-container').masonry({
      itemSelector: '.masonry-container > div',
      columnWidth: 1
    });
  });
});