Some trouble with Lazy Loading or some script blocking it

[ShaheryarJunejo]

Hello.

When viewing collection pages in mobile or mobile view on my browser, the lazy loading seems to get stuck.

Examples:

https://thenaturesstore.com/collections/buy-shampoo-products-at-affordable-prices-online-in-pakistan

https://thenaturesstore.com/collections/sulphate-free-hair-mask-products-online-in-pakistan

While this is stuck here, I cannot open the top menu either.

I can click on products and then come back for it to function, alternatively, I can wait a few seconds and then refresh the page for it to load. But if I don't do either, the page is just stuck with 90% transparent images.

Any idea if a script is blocking it or something or maybe there is clash? I am using pagefly for my homepage only. 

From lighthouse and pagespeed insights, the Largest Contentful Paint element is the problem, it just takes too long to load.

Can also be seen in this video.

https://clarity.microsoft.com/shared/recording/84b81274-1b92-40b6-bb82-2e722764466c

Any help is much appreciated.

Thank you

[namphan · Accepted solution]

Hi @ShaheryarJunejo,

Please go to Actions > Edit code > Assets > theme.scss.liquid file and paste this at the bottom of the file:

.product__image-wrapper--loading {
    -webkit-animation: none;
}

[namphan · Accepted solution]

Hi @ShaheryarJunejo,

Please go to Actions > Edit code > Assets > theme.scss.liquid file and paste this at the bottom of the file:

.product__image-wrapper--loading {
    -webkit-animation: none;
}

[ShaheryarJunejo]

Thank you for the reply Namphan, this solved it.

[namphan]

Hi @ShaheryarJunejo,

Happy to help you, if you have any further requests, you can contact me 😊

[Dan-From-Ryviu · Accepted solution]

Hi @ShaheryarJunejo 

Your store will get the issue when it has this issue. 

You can solve it by adding this code to Online Store > Themes > Customize > Theme settings > Custom CSS

.product__image-wrapper--loading {
-webkit-animation: unset !important;
}

But I recommend you found which is causing script issue to solve it.  

[ShaheryarJunejo]

Thank you for the detailed response Dan, this solved it. I will see if I can ask some developer to help with the overall theme as it is quite buggy after addition of some of the apps. The code that you gave me, it will kill all the animations even on the home page right? if I put this in my pagefly main css?

[Dan-From-Ryviu]

Just an animation of images only.