Maison > interface Web > js tutoriel > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-11-17 08:07:03
original
604 Les gens l'ont consulté

How to Ensure a Background Image Loads Before Code Execution?

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)');
});
Copier après la connexion

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;
Copier après la connexion

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})`;
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal