4.8.2 onwards Woocommerce main shop image is being lazy loaded

Hey Jason,

Thank you for the inquiry.

Where can we see the issue? Please post the site URL in the private field. The theme automatically adds the lazy loading attribute to all images regardless of their position in the document. If you want to disable lazy loading on product pages, you can add this code in the functions.php file.

add_action("wp", function() {
	if(is_singular("product")) {
		add_filter( 'wp_lazy_loading_enabled', "__return_false", 999 );
	}
}, 999);

Best regards,
Ismael

Hi,

You can try this script in the functions.php file to remove the loading attribute from the product image.

function ava_custom_script_remove_lazy(){
  ?>
  <script>
        (function($) {
            $(document).ready(function($) {
  		$('.size-shop_single').removeAttr('loading');
  	    });
        })(jQuery);
  </script>
  <?php
}
add_action('wp_footer', 'ava_custom_script_remove_lazy');

Best regards,
Ismael

Hi,

The lazy loading is actually a native browser feature, it is not from jQuery and it is triggered once the document is ready or when an image is visible in the view port. Removing the loading attribute immediately once the document is ready should prevent the image from being lazy loaded.

You can see the current browser support in the following link.

// https://caniuse.com/loading-lazy-attr

Did you test the script?

Best regards,
Ismael

Hi!

I see. Sorry for the confusion. Yes, you might be right. Unfortunately, I am not sure if it is possible to detect above the fold content using PHP. You might be able to unset the loading attribute using the following filter.

add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( $size === 'shop_single' ) {
        unset( $attr['loading'] );
    }
    return $attr;
} );

// https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_attributes/

You can create the logic based on the $attachment info, or check if the $size is equal to “shop_single”.

Regards,
Ismael

Hey!

We have forwarded the issue to our channel for further consideration. For the meantime, please provide a link to any of your product page so that we can check it. You might have to keep the above filter temporarily.

Thank you for your patience.

Best regards,
Ismael

Hi Jason,

Thank you for following up.

The filter above actually removes the loading attribute of the product’s main image (shop_single), so it should be a viable solution, temporarily. Did you try it?

Best regards,
Ismael

Hi,

The same code works fine on our end. It removes the loading attribute of the single product featured or main image. Did you copy it directly from the forum, and not from your email?

What is your workaround? Mind it sharing it here so that we could implement it to the theme.

Best regards,
Ismael