Wordpress Smush Lazy Loading adds padding, how to exclude specific image

1
votes

For some reason when I have Smush Image Lazy Loading enabled, it adds a padding on some of the Elementor elements.

enter image description here

Since this is a Elementor widget from a plugin (Happy Addons) I have no control of the HTML source of the widget, thus I can't add a class to the <img/> tag. With Smush it's possible to disable lazy loading based on a class, or by using a filter.

What I tried:

  • Adding a class to the img tag on page load with jQuery.
  • Using a add_filter with the wp_smush_should_skip_parse function
  • Using a add_filter with the smush_skip_image_from_lazy_load function
  • Using a add_filter with the smush_skip_image_from_cdn function

None of the options above seem to have any effect on disabling the images from being lazy loaded. The code for the add_filters is similar to the one from their support team: https://premium.wpmudev.org/forums/topic/wp-smush-pro-exclude-image-from-lazyloading/ (only replaced the image URL) note that I'm using the free version of Smush.

What did work was to exclude the whole page from being lazy loaded, but that's not my preferred way of fixing the issue since it's only happening to one element on the page.

Is there anyone that could provide me a working example on how to ignore a specific image from being lazy loaded using Smush?

1
wordpresslazy-loadingelementor
Can you not instead modify the CSS to force no padding? Not ideal but !important should work. - Shoelaced
It's actually not a real padding that is being added, there is some javascript adding a style="height:...px" and that one is freaking out because of the lazy loading (just figured that out) - Bram
It sounds like the height is being added by Elementor, but it's not able to calculate it correctly because the lazyloading has prevented it from loading right away. The class should work but if it didn't then perhaps was added after the lazyloading feature loaded. Could you perhaps instead remove the lazyloading attributes from the img tag with jQuery? Not sure if that would work... WPMUDEV's customer support is great, if you can ask them. - Shoelaced
I'll definitely contact them as well :-) I didn't try to remove classes so I'll give that a go! Thanks already for your help. - Bram

1 Answers

1
votes

I somehow overlooked an extra option in the Smush plugin, enabling native lazy loading resolved the issue for me and also drastically improved loading speeds.

enter image description here