Using lazyloading with Glint theme's masonry

I am having trouble lazyloading the masonry bricks in the Glint theme. I’m able to successfully lazyload my masonry photos, but the masonry photos overlap and stack up over each other. This is probably because the masonry script doesn’t know the dimensions of the photos in advance, since they’re not loaded in at first.

I would appreciate help with getting lazyloading working for the Glint theme, as I’ve been unable to do so.

I’ve attached a cut-down version of the default Glint template with lazyloading set up the same way it is in my project. This should give you an idea of what my problem is and how to fix it.

In case the post didn’t attach my example, here it is again.

Hey there

May I take a look at the live website? please provide url and I will check it

I currently do not have my website’s masonry set up that way, since that would make it difficult to view the images. It would make my website difficult to use during this time, so I don’t want to demonstrate on my live site if it is avoidable.

The sample I gave you in my previous message was slightly broken, but I’ve attached a new one to this message. It should be a perfect representation of the problem, because the code is the same as my live site. The first half of the photos have their thumbnails lazyloaded and have been overlapped over each other (this is the problem), and the other half of the photos do not have their thumbnails lazyloaded.

This is a perfect representation of my problem. I want to lazyload these thumbnails, but the masonry overlaps them over each other. I believe this is because it doesn’t know the dimensions of the lazyloaded thumbnails in advance.

The overlapped photos correct themselves when you resize the browser window. This means that the solution should be some sort of “update” function to the masonry or lazyload scripts.

Here is a live site of that demonstration for convenience. Glint

Hey there

Yes, I see it now, this is a conflict with the Lazy load script, I was not able to found a solution, what I can do is to sent this problem to the developer, unfortunately, I don’t have any workaround at this moment

I would appreciate help from the developer. Any help would be appreciated.


As I said I can only report this problem, unfortunately since this is not directly related to the template and its caused by third party plugin it may not get priority and I can’t provide any ETA or solution for this problem

I understand.

Thank you for understanding Oyama, it’s very appreciated