lazy load breaking widget

Hi @maxfrederick2

I hope you’re well today!

There are some things worth checking:

1. try switching “Scripts mehtod” in Lazy Load settings (it can be “footer” or “header”)

2. you can try switching to “native lazy loading”

3. there’s an option to disable lazy load for all widgets too (the “widgets” checkbox in “Output Locations” option)

If none of that helps then disabling lazy load for specific image(s) (that are in that widget) or excluding entire page from lazy load would be a way to go.

As for exclusions: note please that you cannot exclude “entire widget” by class/ID. It’s only possible to exclude specific image(s) so the class/ID must be a class/ID set for image (as in IMG tag) and not for e.g. parent div.

That said, please try those 3 options mentioned above. If that doesn’t work, let me know which part/area of the homepage exactly is the widget in question (feel free to share screenshot) so we could take a closer look and inspect its source (using browser “inspect element” tool) to see if there’s a direct way to exclude it.

Best regards,
Adam

Hi Adam,

Thanks for the reply. I have tried those three methods and nothing seemed to work. Here is a couple screenshots of the specific widget with the issue and what it should look like and does without lazy load enabled.

https://ibb.co/hW8grm7 (with the issue)
https://ibb.co/L5CCYfd (without issue)

Hi @maxfrederick2

Thank you for the screenshot.

This usually happens due to a bad CSS or script, I can see the builder will set the position on the fly, so when the Lazy Load is enabled the image doesn’t really exist yet and the script will get the wrong top position, here is a screen record to understand what is happening https://monosnap.com/file/ESQ1ACRJyVHdTV9Ol0FnRn1R7Z0ytS you can see when I resize the screen it forces the correct position because that time image already exists.

In case the Native Lazy Load in Smush Settings is not making any difference I suggest contacting the Elementor support to enhance the Lazy Load compatibility of this specific module.

We can exclude those images from Lazy Load but since Elementor adds the custom class to the Div we need to use a custom code for it.

<?php

add_filter( 'smush_skip_image_from_lazy_load', function( $status, $src, $image ) {
    $exclude = [
        'https://abc.com/wp-content/path-to-image-one.jpg',
        'https://abc.com/wp-content/path-to-image-two.jpg',
    ];
    if (in_array($src, $exclude) ) {
        $status = true;
    }
    return $status;
}, 99, 3 );

You can add the code as a mu-plugin following this guide https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Best Regards
Patrick Freitas

Hey Patrick,

Thanks for providing all this information!

Much apprecaited.

Hi @maxfrederick2,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to open a new thread for any further assistance.

Best Regards
Nithin