W3TC creating a blank image slide in image slider lazy loading

The issue also affects this table on my website. W3TC lazy load adds that redundant transparent image/placeholder. The images at times fail to show.

Here’s the image that it adds.

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E

LINK: http://bit.ly/W3TCLAZYLOADBUG

• This reply was modified 2 years, 2 months ago by deewinc.

Hello,

Autoptimize blaming W3TC while you’re blaming them back again. But from my inspection it’s your issue.

Here’s why.

1. Yes, the theme has a default lazy load feature but it bypasses any image sliders and tables with images that I insert on the content pages. And it’s only W3TC that’s able to detect these images and lazy load them.

2. I have run tests with Autoptimize disabled and W3TC lazy load is the one causing it. It disappears after I disable the lazy load on W3TC

If you want, I can disable the theme’s lazy load and Autoptimize for you to troubleshoot more. I’ll also open a thread on Autoptimize help forum to share this issue.

By the way, try pay attention to my main post and follow my explanation closely. Interract with the image slider on that page as I have explained and you’ll see it loading the blank slide.

Also, go to the page with tables and reload it. Hard reload the page to delete any cache. Then try expand the tables to see photos, you’ll notice some records have that blank image.

• This reply was modified 2 years, 2 months ago by deewinc.

Hello,

Thanks for your response. I have created a video for you to watch and understand the issue better. Before creating it, here’s what I did.

1. Deactivated Autoptimize

2. Deactivated theme’s lazy loading feature

3. Slowed down the slider for you to see where that blank redundant SVG image file messes up the lazy loaded images.

From from the video. I have compared the the page with the slide when lazy loading is off and when lazy loading is active.

Image sliders work by duplicating two images. One that’s used in the slide animation and the one that’s displayed once the slide animation ends.

Let’s say I have images 1, 2, and 3 for the slide. In this case, we can rename them for better understanding.

Images for the animation slide animation will be have an extra character (A) and the ones to be displayed with have the extra character (B)

So, in the image slider the images will be queued in the format,

1A-1B, 2A-2B, 3A-3B

But when lazy load is activated, W3TC replaces one of the animation slides with a blank slide on the last slide. Let’s name the bank slide (S)

So you have,

1A-1B, 2A-2B, 3S-3B

So, that’s where the blank is coming from that you can see in the slowed down slide. You can go check it once more. I’ll keep it slow. Remember to hard reload the pages.

As for the table, I think you may have loaded the page when I have deactivated lazy load. Try empty cache and hard reload the page now and you’ll see what I have mentioned. It’s also replaced with the blank SVG file.

I have tried to change the Lazy Load settings but nothing works. Even when I deactivate HTML minify the issue is still there.

Here’s the video

UPDATE:

When I use Autoptimzie Lazy Load, it works perfect and it’s not loading the transparent blank slides. The problem is the Autoptimzie Lazy Load JS takes 500ms plus to load while W3TC lazy load JS takes less than 30ms to load. I wish this issue can be resolved.

Another thing is Autoptimize, despite lazy loading the slides, it downloads the images even before the user reaches the slider section. But with W3TC it strictly waits for the user to reach the slider before loading the images.

You have the video for reference. You can use W3TC alongside any slider plugin. In my case, I used Metaslider. As for the table images, I used Ninja Tables PRO.

You can test them and hopefully fix the issue.

• This reply was modified 2 years, 2 months ago by deewinc.

Another update: CORRECTION

Upon much much closer inspection, Autoptimize seem to load a similar SVG placeholder. But once you scroll through the slides, it automatically removes the placeholder from the code and swaps it with the right image slide.

You can open the page and inspect. Autoptimize Lazy Load is active right now. And you can test it out and see that the SVG placeholder is replaced automatically by Autoptimzie.

Autoptimize behaves the same when it comes to the table. It loads the SVG placeholder first then swaps it with the right image for that slot.

That means, W3TC fails to replace the placeholder with the right image as required. Kindly investigate and fix this bug.

• This reply was modified 2 years, 2 months ago by deewinc.
• This reply was modified 2 years, 2 months ago by deewinc.