Comment déterminer si une image d'arrière-plan est entièrement chargée en JavaScript ?

Détermination de l'état de chargement d'une image d'arrière-plan

Dans le développement Web, définir une image d'arrière-plan sur divers éléments, tels que la balise body, est une pratique courante. Cependant, s'assurer que l'image est entièrement chargée avant d'exécuter le code suivant peut être un défi.

Pour résoudre ce problème, 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)');
});

Cette méthode crée un élément d'image invisible en mémoire et attribue l’URL de l’image d’arrière-plan souhaitée à son attribut source. En écoutant l'événement de chargement, vous pouvez détecter quand l'image a été entièrement chargée, puis l'appliquer comme image d'arrière-plan pour l'élément spécifié.

En JavaScript, le code apparaîtrait comme :

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

Vous pouvez également résumer cette fonctionnalité dans une fonction de retour de 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(() => {
    document.body.style.backgroundImage = `url(${image})`;
});

Cette approche vous permet de gérer le processus de chargement d'image de manière asynchrone et effectuer les actions ultérieures sous condition uniquement lorsque l'image est disponible.

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!