Lazy Loading Missing for Images (in Query Loop)

Hi Stefan,

Try this method:

add_action('template_redirect', function() {
    if (!is_archive() && !is_home()) {
        return;
    }
    ob_start(function($html) {
        $eager_count = 3; // Number of images to set as eager
        $counter = 0;
        $html = preg_replace_callback(
            '/<img\b([^>]*)\bloading=["\']lazy["\']([^>]*)>/i',
            function($matches) use (&$counter, $eager_count) {
                $counter++;
                if ($counter <= $eager_count) {
                    $tag = '<img' . $matches[1] . $matches[2] . '>';
                    $tag = str_replace('<img', '<img loading="eager"', $tag);
                    if ($counter === 1) {
                        $tag = str_replace('<img', '<img fetchpriority="high"', $tag);
                    }
                    return $tag;
                }
                return $matches[0];
            },
            $html
        );
        return $html;
    });
});

Adjust $eager_count to control how many images get loading="eager". The first image also gets fetchpriority="high" which helps with LCP. Adjust the is_archive() / is_home() condition to match whichever pages your loop template displays on.

Hello,

I found a more targeted solution using a GenerateBlocks internal filter. This hooks directly into GB’s rendering pipeline, so it only affects media blocks inside query loops — no output buffer or page type conditions needed:

add_filter('generateblocks_before_dynamic_tag_replace', function($content, $args) {
    $block_name = $args['block']['blockName'] ?? '';

    if ('generateblocks/media' !== $block_name) {
        return $content;
    }

    if (!class_exists('WP_HTML_Tag_Processor')) {
        return $content;
    }

    $in_query = isset($args['instance']->context['generateblocks/loopItem']);

    if (!$in_query) {
        return $content;
    }

    $loop_index = $args['instance']->context['generateblocks/loopIndex'] ?? 0;
    $eager_count = 3;

    $processor = new WP_HTML_Tag_Processor($content);

    if ($processor->next_tag('img')) {
        if ($loop_index <= $eager_count) {
            $processor->set_attribute('loading', 'eager');

            if (1 === $loop_index) {
                $processor->set_attribute('fetchpriority', 'high');
            }
        } else {
            $processor->set_attribute('loading', 'lazy');
        }

        $content = $processor->get_updated_html();
    }

    return $content;
}, 10, 2);

It uses GB’s loop context to identify the position of each image in the loop, then sets loading="eager" and fetchpriority="high" on the first image for LCP, loading="eager" on images 2-3, and explicit loading="lazy" on the rest. You can adjust the $eager_count value if needed.