Préchargement d’images avec jQuery

Posté le vendredi 23 mai 2008 par Matt
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Pour ceux qui ne connaîtraient pas encore, jquery est une librairie javascript très puissante qui permet de faire beaucoup de choses en peu de lignes de code. Elle porte fièrement sa devise de « code less, do more », qui est tout à fait appropriée !

Par ailleurs, jquery permet de développer des plugins de manière assez simple, afin de rajouter des fonctionnalités au module de base. Mais nous y reviendrons une autre fois…

Le sujet du jour est le préchargement d’images, un concept relativement basique et régulièrement utile.

Voici une méthode simple pour l’effectuer :

$.preloadImages = function(arguments)
{
    for (var i = 0; i < arguments.length; i++) {
        $('<img/>').attr('src', arguments[i]);
    }
}

var imagesToPreload = Array(\
    'image1.gif',\
    '/repertoire/des/images/image2.gif',\
    'http://www.example.com/repertoire/image3.gif');

$.preloadImages(imagesToPreload);

Notes:

  • $ est un raccourci pour l’objet de base jQuery. En cas de conflit (par exemple avec Prototype, une autre lib assez répandue), il est possible de le redéfinir.
  • imagesToPreload contient une liste (Array) d’images sous forme de texte (String).
  • Les \ en fin de lignes permettent de continuer à la ligne du dessous en rendant le retour à la ligne invisible au parser javascript, et donc d’avoir une liste d’images plus agréable à lire si l’on aligne verticalement le début du nom de chaque image.
  • La fonction preloadImages() prend chacun des arguments donnés par le tableau (Array) et crée à la volée une balise html <img> puis donne à l’attribut « src » de cette balise le nom de l’image. Du coup, l’image est appelée et chargée dans le cache du navigateur.
  • Comme on n’insère pas cet objet dans le DOM, rien n’est affiché.

Et voila. C’est simple et efficace, à l’image de jQuery !

Cette entrée à été postée le à 20:54 et est enregistrée dans Javascript, Tutoriaux.
Vous pouvez suivre les réponses à cette entrée à travers le flux RSS 2.0.
Vous pouvez laisser une réponse, ou promouvoir depuis votre propre site.

2 Commentaires à 'Préchargement d’images avec jQuery'

  1. dvilston a dit :
    jeudi 14 août 2008 à 15:46

    yeah bien sympa cette petite fonction mais il me semble que la boucle for consomme beaucoup de ressources. On pourrai peut être l’améliorer grâce à une boucle foreach.
    Array.forEach()

  2. Matt a dit :
    jeudi 30 octobre 2008 à 16:20

    Effectivement on peut toujours améliorer la performance, mais étant donné que ce script est censé n’être exécuté qu’une fois au chargement de la page, je ne pense pas que ce soit un vrai problème.

    Par contre, j’ai remarqué depuis ce post que cette méthode pose problème avec certains vieux navigateurs…

    Le navigateurs récents étant capables de gérer les deux méthodes, je suis revenu à la méthode plus traditionnelle de javascript :

    var imagesToPreload = Array(\
    'image1.gif',\
    '/repertoire/des/images/image2.gif',\
    'http://www.example.com/repertoire/image3.gif');

for (var i = 0; i<imagesToPreload.length; i++){
    var img = new Image();
    img.src = imagesToPreload[i];
}

Laisser un Commentaire

Haut de page