Comment vérifier de manière fiable si une image d'arrière-plan a été chargée ?

Utilisation d'un chargeur d'image d'arrière-plan

Vous essayez de vérifier si une image d'arrière-plan a été chargée en définissant une image d'arrière-plan sur la balise body puis en utilisant la fonction load(). Cependant, cette approche ne fonctionne pas efficacement pour les images d'arrière-plan.

Pour vraiment vous assurer que l'image d'arrière-plan est complètement chargée, vous pouvez utiliser une technique différente :

$('<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 nouvelle image en mémoire et y attache un écouteur d'événement de chargement. Une fois l'image chargée, l'événement de chargement est déclenché et l'image d'arrière-plan est définie sur la balise body.

En JavaScript Vanilla, cela peut être implémenté comme :

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

Vous pouvez créez également une fonction abstraite pour gérer le chargement de l'image et renvoyer 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})`;
});

Cette approche vous permet de vérifier de manière fiable l'achèvement du chargement de l'image d'arrière-plan et garantit que le code n'est exécuté qu'une fois l'image terminée. entièrement chargé.

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!