Usando un cargador de imágenes de fondo

Estás intentando comprobar si se ha cargado una imagen de fondo configurando una imagen de fondo en la etiqueta del cuerpo y luego usando la función load(). Sin embargo, este enfoque no funciona eficazmente con las imágenes de fondo.

Para asegurarte realmente de que la imagen de fondo se haya cargado por completo, puedes utilizar una técnica diferente:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

Este método crea una nueva imagen en la memoria y le adjunta un detector de eventos de carga. Una vez que la imagen se ha cargado, se activa el evento de carga y la imagen de fondo se establece en la etiqueta del cuerpo.

En JavaScript básico, esto se puede implementar como:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url('   src   ')';
});
image.src = src;

También puede crear una función abstracta para manejar la carga de la imagen y devolver una promesa:

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

Este enfoque le permite verificar de manera confiable que se haya completado la carga de la imagen de fondo y garantiza que el código solo se ejecute una vez que la imagen esté completamente cargada.