I'm having an issue where images are not loading fully, or, seem to be appearing and disappearing on my image gallery carousels. 

It seems as though certain images, for example, the last image in the row, seem to not display until I scroll over onto them, and I want them to be loaded and visible at all times. 

I thought that perhaps this had to do with the set loading style. I switched it to default, skip lazy load, and lazy load while clearing the cache to try all three settings, and they still seem to be disappearing.

Could you help me so that these stay loaded at all times?

You can see this instance happening in two different portfolio pieces I have, both at: https://freestylearchitects.pexldesign.com/portfolio/peak-view/ -and at- https://freestylearchitects.pexldesign.com/portfolio/whiterock-craft/

Thank you in advance!

Yes. It is still present.

When you open the gallery, do you notice how the image on the left side isn’t loading? 

The image in the center is, as is the right of the center image.

The images on the left side of the first image are not showing.

If you click the left arrow, it scrolls to that image and then the main image disappears which then goes to the right side.

I want all images to show and not have this disappearing scenario

Hi Tahir

Thanks for your speedy reply and assisting with helping me get this sorted out.

I set all galleries back to "Skip Lazy Load" and I appear to be having the same issue.

Some further explanation that might be worth mentioning: I'm running this subdomain development site through Cloudflare. I've gone through and made sure I do not have Rocket Loader enabled, but after doing some research with ChatGPT, it's telling me that because the files are WebP, it could be causing issues. 

The strange part is that I'm not experiencing any issues with the /river-respite/ piece, even though they are also .wepb format, but /peak-view/ and /whiterock-craft/ are having the same issue where the images are disappearing.

Could this be a setting in Cloudflare that I'm missing?

Hi Tahir, 

Thanks again for your speedy reply. I think I've pinpointed what I'm experiencing a little bit better. I was working on my laptop last night and noticed that this seems to be working fine on all of the portfolio pieces. However, when I switch to my desktop browser, this is when I experience issues.

It seems as though when my browser width snaps below 1370 pixels in width, the image left of the first image disappears (see screenshots). If I'm over 1370 pixels in width, everything appears fine and all images are fully loaded. 

In the first two screenshots, the browser width is set to 1365 px in width, cutting off the image on the left.

In the second two screenshots, the browser width is set to 1375 px in width, showing the image on the left as it should be.

Any idea why that disappears under the threshold of 1370 px?

And a follow up on this. WP Rocket is completely disabled. It is not what is causing the issue.