Chargement image de background

Version imprimable

26/01/2007, 15h02
mewax

Chargement image de background

Bonjours à tous,

Comme je suis nouveau sur le forum, j'éspère que mon post se trouve au bon endroit et que je n'importune personne en le postant ici... :)

Donc j'ai un petit problème, non bloquant c'est vrai mais qui peut tout de même être assez génant pour l'utilisateur, c'est pourquoi j'essai d'y trouver une solution et qui sait, peut-être la trouverai-je ici sur ce forum qui est il faut bien le dire, super intéressant et utile.

Ma question est la suivant :

Comment faire lorsque l'on à de grosses images de fond (mise en background dans le css sur la balise body) afin de mettre une sorte de loader (avec une barre de chargement ou simplement un texte des pourcentages) avant que le reste du site ne soi affiché. En gros, j'aimerais que le site ne s'affiche qu'après que mes grosses images de background ne soient totalement chargé et que ce chargement soit affiché sous la forme d'une indication pour l'utilisateur genre une barre de chargement ou autre...

Je pense que cela doit être possible en javascript mais je n'ai pas de solution et je me disais que peut-être certaines personnes ici avaient peut-être une idée.

Je lance donc un petit appel au secours (ou du moins à l'aide :)).

Merci d'avance à tout le monde :)

Bybye
26/01/2007, 15h10
E.Bzz

Bonjour,
Pas un spécialiste du truc, mais j'ai appris ici que le onLoad fonctionne sur <img>.
Ce que tu peux faire, c'est charger d'abord tes image en <img> (masquées), et non en background.
Une fois chacune chargée (détecté via onLoad, donc), tu incrémentes un compteur jusqu'au nb d'images attendu. Quand le compteur est au max, tu les affectes au background en CSS, via JS, puis tu "démasques" le contenu de ta page.
Le compteur est nécessaire si tu as plusieurs images, car il n'est pas possible de prévoir dans quel ordre elles seront chargées, et donc quelle sera la dernière qui déclencherait le script.
Attention : juste une idée comme ça, jamais testée : j'ai pas tellement d'images dans mes pages :mrgreen:

A+
26/01/2007, 15h51
mewax

Hello,

Tout d'abord merci pour ta réponse rapide et qui m'a l'air assez réaliste. Je n'y avais jamais pensé :)
J'aurais juste une petite question sur ta solution, comment définir une image qui se trouve déjà dans la page et déja chargé comme background css d'un élément via JS ?

Merci encore :)
26/01/2007, 15h57
E.Bzz

Citation:

Envoyé par mewax

J'aurais juste une petite question sur ta solution, comment définir une image qui se trouve déjà dans la page et déja chargé comme background css d'un élément via JS ?

Soi je comprends pas ce que tu veux dire, soi c'est le contraire de ta phrase :mrgreen:
Justement, elle est pas déjà chargée en background.
Sur le dernier onload (suite compteur atteint et patati patata) :

Code:

document.getElementById('ton_div_ou_autre').style.backgroundImage = 'une_url_que_tu_avais_chargé_dans_un_img.gif';

Comme elle est déjà en cache, l'affichage du background devrait être instantané ...

A+
26/01/2007, 16h11
mewax

Citation:

Envoyé par E.Bzz

Soi je comprends pas ce que tu veux dire, soi c'est le contraire de ta phrase :mrgreen:
Justement, elle est pas déjà chargée en background.
Sur le dernier onload (suite compteur atteint et patati patata) :

Code:

document.getElementById('ton_div_ou_autre').style.backgroundImage = 'une_url_que_tu_avais_chargé_dans_un_img.gif';

Comme elle est déjà en cache, l'affichage du background devrait être instantané ...

A+

Merci cela répond parfaitement à ma question :)

Reste à tester tout cela. Je tien au courant de mes résultats :)

Merci encore :)