Использование загрузчика фонового изображения

Вы пытаетесь проверить, загрузилось ли фоновое изображение, установив фоновое изображение в теге body а затем с помощью функции load(). Однако этот подход не работает эффективно для фоновых изображений.

Чтобы действительно убедиться, что фоновое изображение полностью загрузилось, вы можете использовать другой метод:

$('<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)');
});

Этот метод создает новое изображение в памяти и присоединяет к нему прослушиватель событий загрузки. После загрузки изображения запускается событие загрузки, и фоновое изображение устанавливается в теге body.

В стандартном JavaScript это можно реализовать так:

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

Вы также можете создать абстрактную функцию для обработки загрузки изображения и возврата обещания:

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})`;
});

Этот подход позволяет надежно проверить завершение загрузки фонового изображения и гарантирует, что код будет выполнен только после полной загрузки изображения.