Ad

Wordpress Smush Lazy Loading Adds Padding, How To Exclude Specific Image

- 1 answer

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?

Ad

Answer

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

Ad
source: stackoverflow.com
Ad