Comment puis-je précharger rapidement des images à l'aide de jQuery ?

Préchargement d'images avec jQuery : un guide rapide et facile

Bien que des scripts de préchargement d'images complexes soient disponibles, cet article fournit une méthode concise et simple de préchargement d'images à l'aide de jQuery.

Le jQuery Code

L'extrait suivant montre un moyen simple et efficace de précharger plusieurs images :

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Dans ce code, la fonction preload() prend un tableau de chemins d'image et de préchargements chaque image en créant un élément et en définissant son attribut src sur le chemin de l’image. Alternativement, vous pouvez également utiliser (new Image()).src = this pour précharger les images.

Un plugin jQuery alternatif

Si une approche de plugin est préférée, le L'extrait de code suivant fournit un plugin concis :

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Ce plugin étend l'objet jQuery et vous permet de précharger des images en appelant la méthode preload() sur un éventail de chemins d'images.

Grâce à ces méthodes, le préchargement des images devient une tâche rapide et sans effort, garantissant des performances optimales pour votre application Web.

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!