Archived topic
How to disable loading=lady on a single image block?
11 replies · Started by Fabio on May 18, 2022
hi all,
i have a structure like this:
<div class="gb-inside-container">
<figure class="wp-block-image size-full"><img width="480" height="300" src="https://www.example.com/wp-content/uploads/one.jpg" /></figure>;
<figure class="wp-block-image size-full"><img width="300" height="218" src="https://www.example.com/wp-content/uploads/two.jpg" alt="" /></figure>
</div>
they are two images one under the second, both visibile above the fold.
native lazy load disable lazy loading on the first image, but not on the second.
i would like to remove loading="lazy". from the image "two", without any external plugins is possible?
i wanted to try with a function to unset "loading", but i found it works for featured images in single post.
it's possible to do something even with an image in homepage (or generally pages), maybe adding a class "skip-lazy" and then unset attr loading with a conditional function? ...
Hi there,
The lazy loading is controlled by WP, GP has no control over it,
You can try this PHP snippet to disable WP native lazy loading:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
yes thank you, but if use this i disable it for all the website.
i need only to disable one single image
i was trying to work around something similar to this topic
https://generatepress.com/forums/topic/lcp-issue-featured-image-srcset-scaled-images/page/2/
and
https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/
but they work on featured images
so my question is may be off-topic cause my needs are about Gutenberg image block and not GP or GP BLOCKS ?
Can you link me to your site where I can see the 2 images?
As when I test on my end, it seems WP doesn't add lazy loading to image blocks.
Let me know!
ok so, i found a sort of solution from here
https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/#lazy-loading-image-contexts
so adding this piece of code in functions.php where 1260 is the exact id of my "two.jpg" (second image)
function skip_loading_lazy_image_1260( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 1260, 'full' );
if ( false !== strpos( $image, ' src="' . $image_url . '"' ) ){
return false;
}
}
return $value;
}
add_filter(
'wp_img_tag_add_loading_attr',
'skip_loading_lazy_image_1260',
10,
3
);
i have now that image without lazy loading. i'm still not sure if it's the right way, and i still don't know how to make it general , maybe checking if a class on figure tag exists or not ecc
any ideas? :-)
As you are already using GenerateBlocks, I would recommend using the image block of GenerateBlocks 1.5.
You can add skip-lazy class directly to the image itself.
Oh that's a great news! i wish it will arrive soon this 1.5 !
thank you :-)
It's now open for testing, you can download it here:
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/
Hi Ying. skip-lazy is interesting. I am testing the new GB image block on a dev site and added this to the image "Additional CSS class(es)"
1. Source code in Google Chrome still show "<img loading="lazy"
2. Does this mean it is still being lazy loaded?
I guess the more interesting thing is to be able to disable lazy loading of specific images that are above the fold manually.
Is adding skip-lazy into the image block Additional CSS class(es) the proper way to do this?
Hi there,
simply adding skip-lazy to the GB Image block won't do anything. That reply was in reference to the OPs reply here:
where they are using IDs to specifically disable the loading attribute on that image.
However, the loading=lazy attribute is a browser-level lazy loader. And by default images above the fold (ATF) will not be lazy loaded by it. So for ATF images you don't need to disable it.
More info on the spec here:
I'm sure there's a better way to check image classes, but I've been able to make the no-lazy class work with this:
add_filter( 'wp_img_tag_add_loading_attr', 'skip_lazy_load', 10, 3 );
function skip_lazy_load( $value, $image, $context ) {
if ( strpos( $image, 'no-lazy' ) !== false ) $value = 'eager';
return $value;
}Awesome - glad to hear that!
