XTemos Product Gallery: “Lazy Loading” effect on mobile Homepage

[Johnn91]

Hello WMStaff,

I noticed a slightly annoying effect that occurs only on the mobile version of the website and exclusively on the homepage. The component used is the Xtemos Product Gallery, which has been implemented both on the mobile homepage and the mobile shop page (or product page).

On the shop page, the images within the component are loaded eagerly, so when the page loads quickly on mobile, all images appear immediately, allowing you to scroll through them without any issues. However, on the homepage, when you scroll with your finger (video in private section), the images that are not visible load slowly, initially showing white spaces before appearing after about a second (similar to “lazy loading”). If you scroll from right to left using the component’s horizontal scrollbar, the problem does not occur. On the shop page, scrolling works correctly in both ways (using your finger on the images or the scrollbar) even in incognito mode and without cache (at least on iPhone).

This behavior happens only on real mobile devices like the iPhone 13/14/15 Pro. On Samsung Galaxy, this problem occurs only the first time the website is visited and only on the homepage. Beware, the Google Chrome console device simulator does not display the issue.

The component on the homepage has the exact same settings as the one on the shop page, since it was copy-pasted between the shop page and the homepage, maintaining the same style, and it was double-checked for the same settings as well.

• This topic was modified 1 month, 2 weeks ago by Johnn91.

Hello,

As we can see, our theme’s lazy loading is currently turned off on your website. Only core WordPress lazy loading is active. Try to disable it in Theme Settings -> Performance -> Lazy loading -> Disable native WordPress lazy loading.

Kind Regards

Hi Artem,
it seems the problem persists. Please see the other video in private content.

I’ve tried to disable lazy loading as you suggested, then visited the page in incognito mode, also trying to refresh the page from my iPhone, but nothing changed. The effect is the same: the images, when you scroll horizontally with your finger, appear after 1-2 seconds. This happens only on the homepage; on the product page, the same component works perfectly fine. Maybe there is some JS or something else on the homepage that is slowing down the loading of images there?

Anyway, I cannot understand why with my iPhone 14 Pro (Google Chrome > incognito mode) it works fine on the product page on the first visit (so even without cache loaded), but it does not work as expected on the homepage if the component is the same.
On Samsung Galaxy, the behavior is different. The first time you visit the website, it has this problem, but then, after the first visit, even on the homepage it is ok.

Could it be related to:
1. JavaScript Issues: There might be JavaScript that is interfering with the image loading on the homepage.
2. CSS Differences: The CSS on the homepage might be different from the product pages and could be affecting image rendering.
3. Lazy Loading Configuration: Even though i’ve disabled lazy loading, there could be remnants or conflicts causing this issue.
4. Caching Issues: Caching differences across pages and devices could lead to inconsistent behavior.
5. Specific Homepage Scripts: There might be scripts running specifically on the homepage that are not on product pages.

I don’t know if the theme has other settings to check.
Very wierd.

Can you please check my new video?

Thank you.

Hello,

Thank you for the detailed explanation and video. It appears that the native WordPress lazy loading option is still enabled. Please try disabling it so we can further investigate the issue.

After making this change, please clear your browser cache and check the homepage again. If the issue persists, please let us know.

Best regards

Ok, WordPress lazy loading is now disabled. Cleared cache on my device.
Result: the problem on Google Chrome still persists (iPhone 14 Pro, iOS 17.5.1). I’ve tryed to navigate with Safari browser, now it extends the problem even on the product page.

The result I’d like to achieve is to be able to navigate the category images in the product gallery component and have the images all ready when scrolling horizontally with my finger.

Thanks for your support.

In addition, I’ve noticed that if I “touch” the horizontal scrollbar with my thumb and move it, the images are “almost” all loaded and the problem is very very minor!

So it is different if you scroll them by using your thumb on the horizontal scrollbar or by just swiping directly on the images.

Thank you.

You need to disable this option in Elementor settings as well https://monosnap.com/file/uWJ4d9bbHoy3Y9RgthLuw6K366Rjtu

Perfect! The problem is solved! So it was Elementor interfering with its own lazy loading setting being enabled. Interesting.

Do you suggest enabling WordPress lazy loading again or the theme’s lazy loading? The website seems to run smoothly even without it though.
Do you also suggest updating Elementor to the new version? It seems they did something huge in their new version (image in attachment).

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

I’m glad to hear the issue is resolved! Lazy loading is generally recommended for better performance, but it can sometimes cause issues like the one you experienced.

It’s better to have lazy loading enabled for improved performance, but be aware that you might face similar issues. If the website runs smoothly without it, you can choose to keep it disabled.

Always keep all your plugins, including Elementor, updated to their latest versions. This ensures you have the latest features, improvements, and security fixes. If you encounter any bugs, you can contact the developers for assistance.

Kind Regards

Ok, thank you Artem.

Regards

You are always welcome. Feel free to contact us if you have any further questions.

[Author]

Posts