Wordpress Remove Lazy Load from Main Product Image - php

Question

Need to prevent the main image on the product page from lazy loading.
The main product image is loaded in 'woocommerce/single-product/product-image.php'
It uses: wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); to get the image.
Inside the function above, there is:
// Add `loading` attribute.
if ( wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' ) ) {
$default_attr['loading'] = wp_get_loading_attr_default( 'wp_get_attachment_image' );
}
$attr = wp_parse_args( $attr, $default_attr );
// If the default value of `lazy` for the `loading` attribute is overridden
// to omit the attribute for this image, ensure it is not included.
if ( array_key_exists( 'loading', $attr ) && ! $attr['loading'] ) {
unset( $attr['loading'] );
}
So clearly it's possible to not lazy load it, but I just don't fully understand how I can do this?

Answer 1

A way you can handle this is by creating a conditional that checks if you are currently on a single product page using the is_product() conditional provided by WooCommerce found here.
Also, instead of unsetting attr['loading'], you can set it to eager to ensure that the browser does not automatically set it as something else.
Your final code could look something like this:
function remove_lazy_load($attr, $attachment, $size){
if ( is_product() ) {
$attr['loading'] = 'eager';
}
return $attr;
}
add_filter("wp_get_attachment_image_attributes", 'remove_lazy_load', 10, 3);
edit:
I ended up actually having to implement this myself and this is the solution I came up with
function remove_lazy_load($attr, $attachment, $size){
// check if we're on the single product page
if(is_product()){
// main product image has the class wp-post-image so we'll check the attributes of the image if it contains the class
if(strpos($attr['class'], 'wp-post-image') !== false){
// you can unset but I prefer to explicitly set it
$attr['loading'] = "eager";
}
}
return $attr;
}
add_filter("wp_get_attachment_image_attributes", 'remove_lazy_load', 10, 3);

Answer 2

one way you might be able to do this is to use the wp_get_attachment_image_attributes filter like below:
<?php
add_filter("wp_get_attachment_image_attributes", function($attr, $attachment, $size) {
$first_image_post_id = 'ID of the image you want to remove the lazy attr';
if ( $attachment->ID === $first_image_post_id ) {
unset( $attr['loading'] );
}
return $attr;
}, 10, 3);
More info on the WP docs: https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_attributes/

Answer 3

add_filter( 'wp_get_attachment_image_attributes', 'remove_img_attr', 10, 2 );
function remove_img_attr( $attr, $attachment ) {
unset( $attr['id'] );
return $attr;
}