Muuri: Images are overlapping on load

[msdobrescu]

Hello, I have a problem with the layout.
The images are overlapping during the layout initialization.
Is there a technique to avoid that?
Or a workaround like displaying the calculated layout when ready only?

[GianlucaFrongia]

Can you make a codepen example for this ?

[niklasramo]

Maybe just manually add the item to the grid after the image is loaded and keep images hidden while they are loading?

[msdobrescu]

Basically, I calculate the elements first, then I instantiate the grid. There are about 50 images. The slow load I don't know how to emulate in code pen or other, as long as the original ones I can't publish. My workaround so far consists in rendering the elements hidden, then show them with grid.show(items) method. So it takes a bit longer until the layout is done and the elements show up, images being still loaded. I can't say what is the reason, if the order of the operations could be changed to fix the issue.

[JosephScript]

I've had this issue in the past. What I did was use a the 'load' event listener for img tags. For example: img.addEventListener('load', grid.refreshItems().layout()). Otherwise you can use a third party library to make it easier.

import imagesloaded from 'imagesloaded'

imagesLoaded('.grid').on('progress', () => {
  this.grid && this.grid.refreshItems().layout()
})

[niklasramo]

Seems resolved, closing.