imagesLoaded not working

[paramsinghvc]

I'm using this directive to generate the list of products with images but the images are loaded very badly slowly and overlapping on each other in the beginning. Apparently, the imagesLoaded plugin isn't working at all. Here's my code :

<ul class="productsList" masonry infinite-scroll="loadMore()" infinite-scroll-disabled="endReached" infinite-scroll-immediate-check="false">
     <li class="col-sm-4 col-lg-3 masonry-brick" masonry-brick ng-repeat="product in products">
             // markup for an item
     </li>
</ul>

Please Help! Urgent!!

[jamesjwarren]

I am experiencing this issue without using infinite scroll. Steps to consistently reproduce:

• in chrome, disable browser cache and set network throttling to ~Regular 3G to simulate slow image loading
• masonry grid items will be overlapping once images load

Markup and masonry options:

<div masonry="{ percentPosition: true, columnWidth: '.masonry-sizer', itemSelector: '.masonry-brick' }">
    <div class="masonry-sizer"></div>
    <div class="masonry-brick" ng-repeat="card in posts track by $index">
</div>

Temporary solution

For anyone looking for a temporary solution: I solved it by disabling the in-built imagesLoaded functionality (setting attribute load-images="false" on the masonry element) and implementing image loading logic with imagesLoaded in a separate directive, calling $scope.$broadcast("masonry.reload") on image load.

[danielsmink]

I fixed it by setting the image size explicitly.

In my controller I grab the width of the masonry grid-sizer:

vm.imageWidth = angular.element(".masonry-grid-sizer")[0].clientWidth;

And in my view I calculate the height based on the original image dimensions:

height="{{(view.imageWidth / record.asset[0].width) * record.asset[0].height}}"

[Benraay]

Same issue here no fix made until now ?

[kapilgorve]

I faced the same issue and applied min height to the div after images are loaded ,bricks are reloaded.