I am using a lazyloading script to speed up the loading of my pages and increase my Pagerank. However, Toolset's masonry layout is not compatible with layloading out of the box.
See example here: hidden link
The positioning seems to be calculated before the images load, so the grid items are overlapping. Is there a way I can force the grid positioning to recalculate after the images have loaded? Or perhaps I could just use "height" attributes for each image so the correct amount of space is accounted for when the grid items are positioned even if the images haven't loaded?
Hello. Thank you for contacting the Toolset support.
Yes - I see the grid elements are overlapped on one another with the example URL you shared with me. It's hard for me to give any comment before I check how you build the page and added the elements to it.
There should be JS method available to reload the Mansory grid but if you can share admin access details and once I check your current setup, I will be in a better position to guide you in the right direction.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
Yes - it looks like the lazyload mechanism breaks the output as the grid elements are overlapped on one another.
However, there is no native solution with Toolset as we do not know how lazyload script works which is added using the plugin "Image optimization service by Optimole".
However, I found a simple workaround where I excluded the images that is loaded using view from lazy load from the "Image optimization service by Optimole" plugin's advance settings.
Please check the following screenshot:
=> hidden link
I can see now grid elements are loaded without overlapping: hidden link
I definitely don't want to disable lazyloading...the page could take way too long to load, and that would kill my Pagespeed score!
I'm asking how to make the masonry script COMPATIBLE WITH lazyloading, specifically how to perform the grid item positioning AFTER the images have loaded. AS you know, recalculation happens when you resize the browser window...I'm thinking that the best way to perform the grid item positioning is force the same handler to trigger on a timer or on a callback once I know all images have loaded.
Just to clarify that the exclusions that I added belong to the images that are loaded from view only, exclusions is not going to apply to whole page.
now, If you opt to do not disable the lazy lazyloading for the images that is loaded from view as well - I suggest you should contact the "Image optimization service by Optimole" support as I do not able to find any Docs or any JS hook that I can try or suggest that help you to trigger the lazyloading after the images loaded from the view.
I strongly suggest that you should contact the "Image optimization service by Optimole" support and ask them for the help and let us know if anything can be fixed from Toolset, we would be happy to make it compatible but at least first I would suggest contacting the plugin support and check with them if they offer any hook or JS which we can use to trigger lazyloading manually.
