Lazy loading not working in caption shortcodes

(@galbaras)

This site uses the Classic editor, and when the Image Caption is set, added media are embedded within a shortcode, like this:

[caption id="attachment_16740" align="aligncenter" width="1200"]<img class="wp-image-16740 size-full" src="https://www.behappyinlife.com/wp-content/uploads/2026/10/generations.jpg" alt="Family photos" width="1200" height="800" /> <a href="https://www.magnific.com/free-photo/people-looking-picture-album_29794256.htm#fromView=search&amp;page=2&amp;position=24&amp;uuid=c63a0e89-b432-484c-9dc3-312d618a9eb9&amp;track=ais_hybrid&amp;query=old+family+photos">Image by magnific</a>[/caption]

This then gets translated into:

<figure id="attachment_16740-4" aria-describedby="caption-attachment-16740-4" style="width: 1200px" class="wp-caption aligncenter"><img fetchpriority="high" decoding="async" class="wp-image-16740 size-full lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAMgAQAAAAAbm6avAAAAAnRSTlMAAHaTzTgAAACMSURBVHja7cExAQAAAMKg9U9tB2+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPgPX7wABGnGBnwAAAABJRU5ErkJggg==" alt="Family photos" width="1200" height="800"   data-src="https://www.behappyinlife.com/wp-content/uploads/2026/10/generations.jpg" data-srcset="https://www.behappyinlife.com/wp-content/uploads/2026/10/generations.jpg 1200w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-554x369.jpg 554w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-750x500.jpg 750w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-300x200.jpg 300w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-360x240.jpg 360w" data-max-width="1200" data-sizes="auto" data-eio-rwidth="1200" data-eio-rheight="800" /><noscript><img fetchpriority="high" decoding="async" class="wp-image-16740 size-full" src="https://www.behappyinlife.com/wp-content/uploads/2026/10/generations.jpg" alt="Family photos" width="1200" height="800" srcset="https://www.behappyinlife.com/wp-content/uploads/2026/10/generations.jpg 1200w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-554x369.jpg 554w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-750x500.jpg 750w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-300x200.jpg 300w, https://www.behappyinlife.com/wp-content/uploads/2026/10/generations-360x240.jpg 360w" sizes="(max-width: 1200px) 100vw, 1200px" data-eio="l" /></noscript><figcaption id="caption-attachment-16740-4" class="wp-caption-text"><a href="https://www.magnific.com/free-photo/people-looking-picture-album_29794256.htm#fromView=search&amp;page=2&amp;position=24&amp;uuid=c63a0e89-b432-484c-9dc3-312d618a9eb9&amp;track=ais_hybrid&amp;query=old+family+photos" rel="noopener">Image by magnific</a></figcaption></figure>

Lazy loading doesn’t work with this. Unless I add the skip-lazy class to the images, their inline placeholder isn’t replaced and nothing shows up on the page.

This only happens to guest visitors, because of page optimisation & caching, but even when I exclude the EIO assets from page optimisation, images within captions don’t load.

To be clear, images without a caption render and behave correctly on MANY pages.

I’ve prepared a test page for this. Compare

https://www.behappyinlife.com/test-page/ (no lazy loading)
https://www.behappyinlife.com/test-page/?nocache (everything works)

Both the EIO scripts and the figure tags look the same to me, so I’m at a complete loss here.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support adamewww
(@adamewww)

22 hours, 24 minutes ago

Shane and I had a look at this to try to figure out what was going on… and we’re at a loss. Can you turn on SCRIPT_DEBUG so we can see if it’s doing anything in the console log? It’s looking like it’s running, but the lazyload class is getting stuck there or blocked from continuing, it’s never getting to lazyloaded, or that the element itself is locked in that state in the cache, or the script itself isn’t allowed to run… or? Definitely a weird one!

Also, the only thing that looked different about the lazysizes.js versus the rest of your scripts is that it didn’t have a query string. It’s probably not pertinent but something is stripping query strings perhaps?

Plugin Support adamewww
(@adamewww)

22 hours, 22 minutes ago

One more thing to note, it looks like perhaps none of the images are loading (regardless of your caption menthod)? There are no images in the footer either. So… something is maybe delaying the JS that is messing with how it’s running and breaking it?

Plugin Support adamewww
(@adamewww)

22 hours, 12 minutes ago

One more question (sorry): What are your litespeed JS Settings set to? Is it deferring or delaying, minifying, etc.?

Thread Starter Gal Baras
(@galbaras)

8 hours, 25 minutes ago

The only JS optimisation I use with LiteSpeed is JS Minify. Nothing is combined or deferred.

I’ve tested with the exclusion list containing jquery.js and .min.js, which means that if anything is already minified, it’s not minified again. Same result.

I’ve tested with JS Minify turned off (no script optimisation at all). Same result.

Disabling HTML Minifiy didn’t help either.

I love you guys, and I really appreciate your help over the years, and your great plugin, but I’ve switched to using the LiteSpeed lazy loading, because it worked. Sorry to bail out like this.

Thread Starter Gal Baras
(@galbaras)

7 hours, 59 minutes ago

Just realised this wasn’t the first case for me, and the other one wasn’t related to captions. See https://wordpress.org/support/topic/ewww-lazy-loading-not-working/.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Tags