Preload blurred image and fade in full image

actions.php

<?php
/**
 * Adds a Base64 encoded version of the Featured Image thumbnail
 * to post meta
 *
 * @param int $post_id ID of the post that's being updated.
 */
function dp_add_base64_featured_image_thumb($post_id) {
    // If this is just a revision, don't do anything.
    if (wp_is_post_revision($post_id)) {
        return;
    }

    // If this isn't a regular page or post, don't proceed.
    $post_type = get_post_type($post_id);

    if ($post_type != 'page' && $post_type != 'post') {
        return;
    }

    // Get the ID of the Featured Image.
    $thumb_id = (int) get_post_thumbnail_id($post_id);

    // Make sure the Featured Image exists.
    if (!empty($thumb_id)) {
        // Get the thumbnail version of the Featured Image.
        $thumb = wp_get_attachment_image_src($thumb_id, 'dp-page-header-thumb');
        // Get the MIME type of the Featured Image.
        $thumb_mime = get_post_mime_type($thumb_id);
        // Pass the Featured Image URL and MIME type into our helper function.
        $thumb = dp_get_data_uri($thumb[0], $thumb_mime);
        
        if (!empty($thumb)) {
            update_post_meta($post_id, 'dp_featured_image_thumb_base64', $thumb);
        }
    }
}
add_action('save_post', 'dp_add_base64_featured_image_thumb');

content.php

<?php
$image       = wp_get_attachment_image_src(get_post_thumbnail_id(), 'dp-page-header');
$thumb       = get_post_meta(get_the_ID(), 'dp_featured_image_thumb_base64', true);
?>

<?php if (!empty($image) && !empty($thumb)) : ?>
    <div class="image" style="background-image: url('<?php echo esc_attr($thumb); ?>')" data-dp-full-image="<?php echo $image[0]; ?>"></div>
<?php endif; ?>

helpers.php

<?php
/**
 * Return a base64-encoded version of a file.
 *
 * @param string $url   URL of the file to be encoded.
 * @param string $mime  Optional. MIME type of the file. Default MIME type from mime_content_type/empty.
 * @return string|void  Base-64 encoded version of the file if not empty.
 */
function dp_get_data_uri($url, $mime = '') {
    if (empty($url)) {
        return;
    }

    // If $mime is not passed, try to get it automatically with mime_content_type.
    if (empty($mime)) {
        // Convert URL to path (relative link with first '/' removed).
        $path = ltrim(wp_make_link_relative(esc_url($url)), '/');
        $mime = function_exists('mime_content_type') ? mime_content_type($path) : '';
    }

    // Initiate cURL.
    $ch = curl_init();
    // Set URL.
    curl_setopt($ch, CURLOPT_URL, esc_url($url));
    // Return the transfer as a string.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // $output contains the output string.
    $output = curl_exec($ch);
    // Close cURL resource to free up system resources.
    curl_close($ch);

    if (!empty($ch)) {
        return 'data: ' . esc_attr($mime) . ';base64,' . base64_encode($output);
    } else {
        return '';
    }
}

script.js

var image = $('.image');

if (image.length) {
    var fullImage = image.data('dp-full-image');

    if (fullImage) {
        var dummyImage = new Image();

        dummyImage.style.display = 'none';
        dummyImage.src = fullImage;
        dummyImage.onload = function() {
            image.css('background-image', 'url(' + fullImage + ')');
        };
        dummyImage.remove();
    }
}

style.css

.image {
    background-size: cover;
    background-position: center;
    transition: background 0.4s ease-in-out;
}