Callback function after masonry grid has loaded

[Wesley Smith]

Hi,

Does anyone have an idea of whether or not there is a callback function for the masonry grid to tell when all the images are loaded?

I am having an issue where I am initially trying to hide the masonry grid (using CSS “display: none;”) and display the grid when a button is clicked, however I am running into an issue where the images all collapse on top of each other when I don’t use some sort of a setTimeout function to add the display none property after a certain amount of time.

The issue with this method is that depending on the internet connection, the images sometimes are able to load properly and sometimes they encounter the collapsing issue. I was hoping to avoid this issue by using a callback function that may be built into the plugin to indicate when the images have finished uploading.

If anyone knows about this or could provide any other insight I would be forever grateful / in your debt for all eternity.

Thanks,
Wes

[Wesley Smith]

So, to help with the issue, it looks like the positioning of the images isn’t given enough time to calculate. The absolutely positioned .gallery-items “top” property is being set to 6px and for the second row of images and 12px for the third row of images.

I would assume that the images calculate their top property based on the height of the image that is directly above it. Can anyone confirm? Also any ideas on how to fix this issue?

[Masonry Guy]

Hi Wesley,

First, we don’t have callback function.

Regarding the image load issue, our plugin use imageload extension for masonry layout. So only the layout is visible when the images are loaded. And after all images are loaded, the position of layout is recalculated to fit the space.

I think you have some lazy load image plugin/js used. And it is making delay for the image load.

Can you please deactivate that and try ?

Thanks

[Author]

Posts