Discussion :

[tgilbert79]

Bonjour,
j'ai un slideshow de 5 images jpg (un peu lourde) sur la page d'accueil de mon site. Je souhaite ne charger que la première image puis charger les 4 autres qu'après le onload. Ces images sont des background image dans l'attribut style d'un div.
J'essaye de trouver une solution mais je cale.
Merci pour vos conseils.

[jpvincent]

Avec les images background en CSS, il n'est pas possible de savoir si l'image a fini de charger ou pas. Cependant tu peux jouer avec le cache du navigateur et faire télécharger l'image en javascript avant de l'afficher.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var img = new Image();
img.onload = function() {
  maDiv.style.backgroundImage = img.src;
};
img.src = "mapremierimage.jpg";

Une fois que tu sais que ta première image est chargée, tu peux appliquer des styles au reste de ton diaporama pour faire télécharger les images suivantes. Par contre je ne suis plus très sur du comportement de tous les navigateurs : est ce qu'ils le lancent systématiquement même lorsque l'image est déjà en cache ? essaye voir

[tgilbert79]

ok je vais essayer ça..
Merci