Précharger des images avec jQuery (ou pas)

Je travaillais récemment sur un site qui devait afficher des photos en plein écran avec une qualité élevée. J’ai voulu trouver un moyen de précharger ces images afin qu’elles ne s’affichent pas abrutement à leur chargement mais avec un fondu et quand je l’avais décidé.

Pour cela, il existe trois solutions : la très rapide, la rapide et la très lente.

La très lente

Dans mes égarements codistiques, je me suis demandé si une requête AJAX en GET aurait des chances de fonctionner correctement avec une image.

C’est le cas, mais le résultat avec la méthode get de jQuery sont très mauvais niveau performances. A proscrire donc. Voici tout de même le code :

var url = 'mon-image.jpg';
$.get(url, function(img){
    $('<img/>').attr('src', url).appendTo('body');
});

La rapide

Cette méthode utilise la syntaxe jQuery. Si vous n’êtes pas à 2 ms prêt (mais vous devriez toujours l’être), vous pouvez l’utiliser afin de garder un peu de cohérence dans votre code.

On créer une balise img avec jQuery et on attend le callback load.

$('<img/>').attr('src', 'mon-image.jpg').load(function(){
    $('body').append(this);
});

La très rapide

Il s’agit de créer un objet Image natif à Javascript et d’afficher son image seulement lorsque l’évènement onload est trigger.

Attention, Internet Explorer étant légèrement congénital, onload ne sera pas exécuté si vous définissez l’attribut src de l’image avant l’évènement onload, respectez donc bien l’ordre ci-dessous :

var img = new Image();
img.onload = function()
{
   document.body.appendChild(img);
}
img.src = 'mon-image.jpg';

Cette méthode est de loin la plus rapide car elle est native à Javascript, aussi je vous recommande de vous servir de celle-ci.

Ces trois méthodes ont le bon goût de fonctionner sous IE6+.

Pour le fun, voici les résultats de mes tests de performances sous Firefox, j’ai fais les mêmes sur les autres navigateurs et les résultats varient selon la rapidité de l’engin mais gardent la même tendance.

Préchargement de 10 000 images (sans l’insertion dans le DOM)

$.get :  3784ms
$(‘<img/>’) : 1046ms
Image : 845ms

A vous de jouer !