Preload Background image

Hi there,

Does this thread help?
https://generatepress.com/forums/topic/preload-background-image/

So, which is the best choice to avoid that?

1) Preloading that image?

or

2) Lazy loading that image?

I use a container with a background image at the beginning of all my pages.

Hi there,

Preloading is generally the way to go.

Consider reducing the size of the container as well if possible.

Okay,

I have a different background image on all my pages. How can I preload them? What code and where should I write it?

Thanks!!!

Hi there,

how are you adding the image ? Is it within the post editor to the container block background ?

I added a container with generablocks and then background > URL image.

Unfortunately there isn't much that can be done about that - there a static image so theres no way i can dynamically request that image to be preloaded.

How can I do it manually?

Not sure about this - but one option you can try is:

1. Set the Featured Image on the post, using the same image as the container background.
2. Then Disable it so it won't display:

https://docs.generatepress.com/article/disable-elements-overview/

3. Add this PHP Snippet to the site

add_action( 'wp_head', function() {
    if( is_singular() ) {
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" as="image" href="'.$featured_img_url_full.'"/>';
    }		
},1000);

Is a good idea instead using a plugin? So I can manually select which image to preload.

If there is a plugin that does that and it makes the process easier then for sure :)