[useImageLoaded]="true" swap the images position

[wynfred]

[useImageLoaded]="true" swap the images position

[USPTraining]

I am also facing the same issue. if I don't use [useImageLoaded] then they are appearing in the right order but not stacked properly

[sgruhier]

The way it's implemented, it cannot work. It removes DOM element, then load images, then add DOM element back when images are loaded. Nothing ensure that async load images will keep DOM element order. There is also another bug/side effect. mansory.layout() is called multiple times.

So far, from what I understood about ngx-mansory, it's hard to fix. I'll try something first in my project and see it I can contribute to ngx-mansory. In any case, I'll share what I come up with.

[MakG10]

Here are approaches I took to preserve correct items order when there are images with various heights involved:

1. Set horizontalOrder: true in [options]
2. Update masonry layout when image gets loaded:

<ngx-masonry [options]="masonryOptions" [updateLayout]="updateMasonryLayout">
    <ngxMasonryItem *ngFor="let trip of tripsData">
        <img src="image.jpg" (load)="updateMasonryLayout = !updateMasonryLayout">
    </ngxMasonryItem>
</ngx-masonry>

Layout is updated every time the variable updateMasonryLayout is changed. If you have a lot of items you may wanna do this every n-th element for performance reasons.

[wynfred]

To keep the order of images, you could

1. load images synchronously
2. call reload_items and layout to refresh the order after all images are loaded #18 (comment)
3. if you know the dimension of image before it's loaded, add a div as placeholder