Disable lazy loading for images in specific element

Hi,

I have enabled Lazy loading in Theme Settings > Performance. I know this is a global feature. However, there is one element I would like to disable this for, because when I visit the website on my mobile, the images for this section do not load at all untill I scroll, even though it is at the very top of the page.
I already tried in Elementor > Style > Lazy loading for images > Off, but this does not work. The images still do not load. Which setting or css code should I use to disable loazy loading for a specific section?

Hello,

Please provide the page URL and screen where you want to disable the lazy loading.

Best Regards

Hello,

This problem occurs on all URL’s when browsing on any mobile browser like Samsung Internet or Firefox Mobile. Images are not loaded until you scroll, even at the top of the page. Lazy loading should prevent images loading when the user scrolls to new screen, but now it prevents images from loading at all until you scroll. Please visit our homepage as example with your mobile, you will see what I mean.

How can we solve this?

I have found the reason why the images were not loading in the viewport until scroll, it’s WP Rocket’s Mobile Cache feature. If Mobile Cache is enabled in WP Rocket, it will not load images until you scroll the page on mobile browsers, even for images in the viewport.

I followed your guide at https://space.xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021 and it says specifically:

WP Rocket -> Settings -> Cache -> Separate cache files for mobile devices. Recommended. Activate this option if you use our Mobile DOM optimization option in Theme Settings -> Performance or create a separate page for mobile devices using an appropriate option for particular pages.

Please can you check if you can duplicate this and offer a solution? I want to be able to enable Separate cache files for mobile, since it improves pagespeed insights for mobile considerably.

Thanks.

Hello,

Try to disable the “Delayed JS” option in WP Rocket settings and check how it works.

Kind Regards

Hi,

Disabling the ‘Delayed JS’ option in WP Rocket settings has solved the issue, images are now loading again on mobile in the viewport. However, my Pagespeed Insights report went down from 85 (mobile) & 98 (desktop) to 65 (mobile) and 87 (desktop). What can we do to increase this?

There’s an option in Wp rocket to specify URLs or keywords of JavaScript files to be excluded from defer (one per line). Before, I followed your guide and copy/pasted the list below:

jquery.min
helpers.min.js
clickOnScrollButton
searchFullScreen
menuOffsets
menuDropdowns
cartWidget
mobileNavigation
loginSidebar
menuSetUp
cart-fragments
slick
productImages
cookie.min
owl.carousel
owlCarousel
imagesLoaded

Can we make an adjustment to this list so that we still benefit from faster pagespeed yet avoid the image loading problem? Please let me know as soon as possible. Thank you very much.

Try to add the following additional line to this list

lazyLoading

Kind Regards

Doesn’t have any effect, unfortunately. I now have this list:

lazyLoading
jquery.min
helpers.min.js
clickOnScrollButton
searchFullScreen
menuOffsets
menuDropdowns
cartWidget
mobileNavigation
loginSidebar
menuSetUp
cart-fragments
slick
productImages
cookie.min
owl.carousel
owlCarousel
imagesLoaded

http://prntscr.com/1z0tc7a

You need to disable the Combine JS option in Theme Settings -> Performance -> JS.

Hi, this was already disabled, so that can’t be the reason. See http://prntscr.com/1z18pdn

Please, send us your admin access so we can check.

see below

We don’t see the problem with lazy loading on mobile now https://gyazo.com/86d2e4cc7e4b9eff6d9b9d09eca01205

Yes, it works now. Did you change any settings or did it just start working now? Also, not sure if you changed anything in the settings or if this is because of the theme update to 6.2 earlier today, but the main theme color has been reset to green and the options how woocommerce products are displayed has been reset, even though I had a child theme active. Is this normal? Normally when you have a child-theme, these type of settings should be left as is when you update the main theme?

All theme settings (literally all of them) have been reset since theme update. I have to enter all theme settings again manually. Is there a way to restore them to how it was before the update? And could you explain why this was reset, as I have an active child-theme? Thanks.

Our theme settings can’t be reset after an update. Maybe something went wrong on your website.
Please, restore the backup and we will update the theme for you to make sure that there are no bugs there.

OK, i’ll now restore the back-up from earlier this morning before theme update. I’ll post here once it’s complete so you can login to update the theme to the latest version with keeping the theme settings. At the end, please let me know how you update it so I know this for future updates.

Sure, and provide us your FTP and database phpMyAdmin access if possible.

I was able to update manually following your guide in the help section, so this can be closed now.

[Author]

Posts