Comment garantir le chargement d'une image d'arrière-plan avant l'exécution du code ?

Assurer le chargement de l'image d'arrière-plan avant l'exécution du code

L'incorporation d'une image d'arrière-plan dans la balise body et le lancement de l'exécution ultérieure du code peuvent poser un défi lors de la détermination si l'image est entièrement chargée. L'utilisation de la fonction load() conventionnelle, comme le montre l'exemple fourni, ne suffira pas.

Solution :

Pour surmonter cet obstacle, envisagez l'approche suivante :

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

Ce code crée une nouvelle image en mémoire, en utilisant l'événement de chargement pour détecter quand l'image source a été chargée. En supprimant l'image après le chargement, les fuites de mémoire potentielles sont évitées.

Implémentation de JavaScript Vanilla :

Pour JavaScript Vanilla, la solution prend la forme suivante :

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

Abstraction basée sur la promesse :

Pour abstraire le processus, une fonction pratique peut être créée, renvoyant une promesse :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!