If you don’t use an “Image Lazy Load” plugin, it’s time you install one. And if you happen to pick Jetpack’s free Lazy Load module, you probably did the right thing.

However, since I installed Jetpack Lazy Load, I noticed a little “jump” in my Storefront theme header section, where in fact there is an image – my Business Bloomer logo. The same might apply to any WooCommerce image: a category thumbnail, a single product featured image, a cart icon in the header, a homepage hero image, and so on.

Thankfully Jetpack has a useful “filter” you can tap into in order to exclude image classes from lazy loading (yes, I found this out today, it’s not that I know everything!). So, here’s the fix. Enjoy 🙂

Jetpack: exclude an image from “Lazy Load” functionality

PHP Snippet: Exclude Image From @ Jetpack Lazy Load


/**
 * @snippet       Avoid Lazy Loading an Image - Jetpack
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=79958
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.5, Jetpack 6.5
 */

add_filter( 'jetpack_lazy_images_blacklisted_classes', 'bbloomer_exclude_custom_logo_class_from_lazy_load', 999, 1 );
			   
function bbloomer_exclude_custom_logo_class_from_lazy_load( $classes ) {
	$classes[] = 'custom-logo';
	return $classes;
}

Share:

Leave a Reply