Caption or Title displayed on page while loading images

This is happening due to conflicting lazy-load behaviour. E.g. see here: https://aquoid.com/plugins/photonic/wp-galleries/#fancy. There are 2 main differences between my link and yours:

1. In my link, you only see the spinning wheel, not the title. This is because Photonic will not show anything until the image is available.
2. In my link, you will also see the right amount of space allocated by Photonic to the image placeholders, while in yours, there is lesser space allocated to each image, and your content keeps shifting down as the content above is retrieved.

I am not sure if your theme or another plugin is introducing lazy-loading. You have 2 options to fix this:

1. Preferred option: If you can identify the lazy-loading component in your theme / plugin and turn it off, your galleries will behave fine.
2. If not, you can use a workaround that will turn off lazy loading in Photonic. For this, you can use the JS layout engine (instead of CSS).

Hi Sayontan,

Thank you for the detailed reply and suggestions.

I use the Litespeed Cache plugin, which enables lazy loading, but disabling this plugin and every other non-critical plugin does not resolve the issue. I do not think the Underscores theme uses lazy loading, either.

For some reason, the browser displays the image placeholder and alt text as if the image cannot be loaded until it is. The issue appears in Chrome and Firefox, so it is not browser-specific.

Switching to the JS layout engine resolves the issue because of the different loading methods used. I will consider using the JS layout engine, but I prefer the CSS method.

A demo gallery with Litespeed Cache disabled is here:

https://staging.simplicitytheme.com/abstract-paintings/

I have spent time trying to debug this, but I can’t see where the problem lies. I understand the issue might be specific to my theme and difficult to resolve. Thanks.

I looked through various scripts on your site but couldn’t pinpoint the issue. Based on this solution, you could consider adding the following custom CSS:

.photonic-thumb a img:not([src]) {
  font-size: 0;
  position: relative;
}

This way, when the image is loading, it will force the text to be hidden. I am not suggesting that you add the rest of the code from the solution, since these are local images from your WP installation (and the rest of the solution needs JS, which is considerably harder to add).

Thanks, I think I will use the JS Layout mode for now and look into this again later. ??