[Closed] Split: Images on my cards are not showing up

[Author]

Posts

[wilsonC-2]

Unfortunately, I respectfully disagree with you. The theme works well with the other Toolset page with the same design.

I want to request another technical analysis from another Toolset supporter. Is there any way you can point someone else to take over this thread?

I appreciate your help handing over this issue to someone else.

Thanks.

[wilsonC-2]

The issue is different from the title after the previous supporter split the old thread.

On one of the pages of my website, marketing agency, the cards on the page created with Toolset view go over the other.

[Nigel]

Hi there

The reason the overlapping happens with the cards in the masonry layout is because the images included in the cards are lazy loaded.

When the page completes loading Javascript calculates the positions of the cards, but the cards are not their final height, which messes with the calculations. Only when you scroll down and the images are lazily loaded do the cards occupy their final height, but at that point the masonry script has already run and things are in the wrong position.

If you take some action that prompts the masonry script to re-run (e.g. resize the browser window) then the cards jump into the correct positions based on their final size with the images. Or if you reload the page (with browser caching on) it will load correctly as the images are already available.

Masonry layout isn't compatible with lazy loading content in this way, you'll need to choose one or the other.

[wilsonC-2]

Thanks, Nigel. Do you have any idea why this page works fine, although it's a similar toolset page? hidden link

Are you guys planning to fix this issue since lazy loading is common and necessary in most themes? Also, do you know what the plugin with lazy loading is causing the problem? Or is it the theme?

The new Google page experience updates made my page with Toolset considered an error by Google. It looks like Toolset is a few years behind if it doesn't load lazy loading properly. My honest and respectful opinion is that it's time to fix its speed. If not, allow other plugins from doing it, such as the lazy loading.

[Nigel]

That link is dead, I can't follow it.

I don't know what on your site is responsible for the lazy loading solution, I'm guessing that it is your theme, I can't spot anything in your plugin list that would handle image loading.

You can verify that by temporarily switching to another theme and seeing if the issue persists.

In which case this would be a compatibility issue with the theme, rather than a problem with lazy-loading more generally.

(Looking at the page source it looks like Toolset adds the loading="lazy" attribute to the img tags, the handling of which would normally depend on the browser.)

If the theme is responsible, could you provide a copy so that I can try to reproduce the issue locally to be able to conduct further testing.

(You can zip the theme and share via dropbox link or similar here.)