Bricks: Automatický preload pozadí sekcí

Pro prvních několik sekcí jde zařídit automatický preload obrázků, protože na ty se lazyload (lazy nebo eager) zpravidla nedá zařídit.

Stačí přidat do snippetů nebo child theme tento kód:

//automatic preload for backgrounds ofr first xx sections for Bricks
add_action('wp_head', function() {
    if (function_exists('bricks_is_builder') && bricks_is_builder()) {
        return;
    }
    
    global $post;
    
    $preloaded_images = [];
   
    // First xx sections on the page
    if ($post) {
        $bricks_data = get_post_meta($post->ID, '_bricks_page_content_2', true);
        
        if (!empty($bricks_data)) {
            $section_count = 0;
            $max_sections = 2;
            
            foreach ($bricks_data as $element) {
                if ($element['name'] === 'section') {
                    $section_count++;
                    if ($section_count > $max_sections) {
                        break;
                    }
                }
                
                if (!empty($element['settings']['_background']['image']['url'])) {
                    $preloaded_images[] = $element['settings']['_background']['image']['url'];
                }
            }
        }
    }
    
    foreach (array_unique($preloaded_images) as $image_url) {
        $site_url = parse_url(home_url(), PHP_URL_HOST);
        $image_host = parse_url($image_url, PHP_URL_HOST);
        $crossorigin = ($site_url !== $image_host) ? ' crossorigin' : '';
        
        echo '<link rel="preload" as="image" href="' . esc_url($image_url) . '" fetchpriority="high"' . $crossorigin . '>' . "\n";
    }
}, 1);