Intermittent thumbnails disappearing

Solved
cherylfoh
Explorer
56 5 8

Hello all,

Sometimes, on our product pages that have variants, one of the variant thumbnails underneath the main image will show blank. It can still be clicked and the correct image will show in the main image spot and the variant choice will correctly change to the product selected. It is strictly a visual/display problem. It doesn't seem to have anything to do with the image type or size. Refreshing will sometimes fix it or clicking through the images will sometimes work, also. Anyone else have this issue and know of a fix? This is one example product that I see it happen often, but any of our items that have variant thumbnail images seem to be effected by it sometimes:

https://packturtle.com/collections/new-products/products/hot-wheels-mario-kart-track-playset-choose-...

I attached a screenshot. It happens with Chrome, Brave, Edge browsers. That's the ones I have tried so far.

 

Thumb.JPG

Accepted Solution (1)

Accepted Solutions
cherylfoh
Explorer
56 5 8

This is an accepted solution.

Hey Mario,

Happy to say, I believe I have this fixed. I did have a couple friends try it out at their house and they were seeing the problem, too.

The thumbnails were being lazyloaded with class "lazyloaded". When the problem occurred, I could see the class of that particular image would be stuck as "lazyloading", so it never finished lazyloading for some reason. I do have a fade-in effect on those thumbnails, so maybe it was conflicting sometimes.

What I did to fix the problem, was I stopped lazyloading the thumbnail pictures. I haven't seen the issue since removing the lazyloading and the product pages load just the same. I don't think I even needed the lazyloading on those thumbnails.

Thanks for helping out.

Cheryl

View solution in original post

Replies 6 (6)
r8r
Shopify Expert
2213 283 753

@cherylfoh – what does "sometimes" mean exactly?

I tried it numerous times on Brave Version 1.30.89 Chromium: 94.0.4606.81 (Official Build) (arm64) on macOS Big Sur w/o any glitch.

Screenshot 2021-10-14 at 21.49.19.jpg

If it happens – what does the Network tab and the Console in your Chrome dev tools say?

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
cherylfoh
Explorer
56 5 8

Hey Mario,

Thanks for checking it out. I can pretty much see it happen on most products with variants if I open a new webpage to that product. After it clears up, it usually is good for that session. Then if I close the webpage and reopen it, it is usually still ok. But if I wait a while, it comes back.

Knowing you are unable to recreate the issue, I am wondering if it may be related to the local network here or perhaps the DNS servers our computers point to. I have two PCs here and it happens on both.

Here is the output on the Console and Network tabs in Dev tools on this product that was showing the problem:

https://packturtle.com/collections/new-products/products/star-wars-the-mandalorian-the-retro-collect...

Capture1.JPGCapture2.JPG

I don't really know much about what the errors are. Do you see anything that would cause the issue?

Cheryl

r8r
Shopify Expert
2213 283 753

@cherylfoh – I don't really see much suspicius activity there either. Just a little side note: With the Network-tab you want to enable "Disable Caching" and have it open from the beginning of the request – then you'll see all the assets, not just the async called .js files.

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
cherylfoh
Explorer
56 5 8

Thanks, Mario,

I will dig into this and try it on some friend's computers at their office/home and see if I can figure it out. I will update once I get more info.

Cheryl

cherylfoh
Explorer
56 5 8

This is an accepted solution.

Hey Mario,

Happy to say, I believe I have this fixed. I did have a couple friends try it out at their house and they were seeing the problem, too.

The thumbnails were being lazyloaded with class "lazyloaded". When the problem occurred, I could see the class of that particular image would be stuck as "lazyloading", so it never finished lazyloading for some reason. I do have a fade-in effect on those thumbnails, so maybe it was conflicting sometimes.

What I did to fix the problem, was I stopped lazyloading the thumbnail pictures. I haven't seen the issue since removing the lazyloading and the product pages load just the same. I don't think I even needed the lazyloading on those thumbnails.

Thanks for helping out.

Cheryl

View solution in original post

r8r
Shopify Expert
2213 283 753

@cherylfoh – great detective work!

Maybe you can report this back to the theme devs?

All the best,
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte