Add bricks only after all images are loaded

[SystemDisc]

Is it possible to wait for all images to be loaded before adding bricks? Using imagesLoaded, each brick gets added after that brick's images are loaded. This results in the order of bricks when you initially load the page to be different from when images are cached and available immediately. I'd rather wait for all bricks' images are loaded before adding any bricks to ensure that the same bricks are in the same order every time.

[rtodea]

Hi @SystemDisc,

I solved the issue by calling the layout method each time an image was loaded.

E.g.

…
<img class="card-image" [src]="searchResult.imageLink" (load)="triggerMasonryLayout()">
…

In the component that has the HTML:

constructor(
  @Inject(forwardRef(() => AngularMasonry)) private masonryContainer: AngularMasonry
) {
}

…

triggerMasonryLayout() {
  this.masonryContainer.layout();
}

[SystemDisc]

My request was to set up masonry after ALL images have finished loading, instead of after each.

[rtodea]

Ok, I understand.

This Angular port uses the masonry JS plugin which had recently added horizontal ordering. Check out this blog post.

I am curios if this would solve your problem.