[Resolved] Avoid native lazy-loading of featured image

[David]

No – that filter sets the default for all img and iframe tags.
Something else must be interfering with it. I even booted up a new install to see if my code above still works and it does.

Can you make sure there are no cache, optimization, image optimization plugins or similar related functions running ?

[Jim]

Well, the featured image gets loading="lazy" with:

• ALL plugins deactivated
• No functions in child functions.php except the snippet to disable lazy loading
• No server software that adds lazy loading per hosting support.

Remember the lazy loading attribute was NOT present with theme 2020. That seems to suggest it must at least partly relate to the theme.

[Elvin]

The theme’s code for the featured image is this – https://github.com/tomusborne/generatepress/blob/a3ce1712ab1cc705fed577fad8fa9ea8c04d5d20/inc/structure/featured-images.php#L85-L88 – which is pretty straightforward. It doesn’t add any special attribute and basically uses the default WordPress’ way of adding featured image to the template.

To further help w/ the investigation, can you make a copy of the site on a staging site and provide us temporary access to it to check a few things?

You can use the private information text field to provide the site details. 🙂
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Longinos]

Hi
Trying to help.

Featured image is added with the_post_thumbnail() this call get_the_post_thumbnail() and this put the loading attribute.
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/ see line 191 of the code, so is WP core adding it.

In WP 5.9 the 1st image/iframe in page is skiped from loading=lazy, this threshold can be changed with wp_omit_loading_attr_threshold filter to skip more than the 1st image/iframe.

Whit autoptimize you have a option to skip the first N images when the lazyload is enabled.

[Jim]

@Longinos, looks like you might be on to something, but it remains unclear to me why this code
add_filter( 'wp_lazy_loading_enabled', '__return_false', 999, 3 );
won’t stop all lazy loading attributes. Also, as I understand, GP support tested it in a new install and didn’t get the lazy loading attribute in the featured image, as I am getting.

@Elvin/GP support, I don’t think you have any further responsibility to figure this out, but if you’re still game, please see the Private Info

[Longinos]

Hi @Jim
For me this would not work:
add_filter( 'wp_lazy_loading_enabled', '__return_false', 999, 3 );

the 999 maybe, is the priory and you tell to do the add_filter later, but the 3… is the number of arguments to pass to a function but __return_false don´t have any arguments, it return… well, false. So I think this is throwing php errors

Try whats happend with only add_filter( 'wp_lazy_loading_enabled', '__return_false')

[David]

Hi Jim,

can you grant us an Admin role on that login ?

[Jim]

Sorry, forgot that part! Done.

[David]

Can you check the example URL you sent now ?

[Jim]

Well you did it! Did you just add that filter/function that you suggested here? I’m sure I tried that exactly, but maybe had something else messing it up?

[David]

Awesome. Ok for housekeeping – I commented out the snippets at the bottom of the functions.php.
At the top of the functions.php I added the global snippet ( which has been commented out ) and this one which is the one now working 🙂

That alone made no difference at all.
So I disabled the cache and any plugin that look liked it would interfere with the images.
Then I enabled the GP Blog Module and moved the Pages Featured Images to Below Title, published the changed then moved it back to Above Content.

The last action fixed it. I can’t explain why but it was a last resort lol

[Jim]

Although that solution removes lazy loading for featured images, it also does so for Metaslider slider images. Apparently they also have the context ‘wp_get_attachment_image’. But I definitely want slider images to lazy load.

Based on what I learned investigating that solution, I hit upon this one. This filter seems to only work in that context. But then I could add a condition to select only img tags with class ‘attachment-full’. Then unset the loading attribute.

Thanks for the help!

add_filter( 'wp_get_attachment_image_attributes', 'fp_no_lazy_featured_image', 10, 3 );
function fp_no_lazy_featured_image( $attr ) {
	if ( false !== strpos( $attr['class'], 'attachment-full' ) ) {
    	unset( $attr['loading'] );
    }
    return $attr;
}

(Don’t know why I had to list only one of the three filter parameters to get it to work. This stuff is byzantine.)

[David]

Awesome – glad to see that’s working for you and thanks for sharing it.
Yeah filters are kinda weird, I feel like the $acccepted_args is kinda busted. The spec states you set to it the number of args bound to the callback. So in your snippet it should be 1 not 3. I therefore generally start with the max args the filter accepts and work my way down if I need to lol

[Author]

Posts