Comment s'assurer qu'une image d'arrière-plan est chargée avant de styliser le corps ?

Comment vérifier si une image d'arrière-plan est chargée

Afin de garantir qu'une image d'arrière-plan est complètement chargée avant d'exécuter un code, tel en modifiant le style de la balise body, une approche alternative est nécessaire. Voici une solution détaillée :

1. Création d'un objet image :

const image = new Image();

2. Définition de la source de l'image :

image.src = 'http://picture.de/image.png';

3. Utilisation de l'événement de chargement :

image.addEventListener('load', function() {
  // Code to be executed after the image is loaded
});

4. Application de l'image d'arrière-plan :

Une fois l'image chargée, vous pouvez procéder à son application comme image d'arrière-plan :

const body = document.querySelector('body');
body.style.backgroundImage = `url('${image.src}')`;

5. Utiliser une solution basée sur des promesses :

Pour une approche plus structurée, une fonction basée sur des promesses peut être utilisée :

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', () => reject(`Failed to load image: ${src}`));
    image.src = src;
  });
}

loadImage('http://picture.de/image.png').then(image => {
  body.style.backgroundImage = `url('${image.src}')`;
});

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!