Précharger mes images à l'affichage de mon site

Précharger mes images à l'affichage de mon site - HTML/CSS - Programmation

Marsh Posté le 18-04-2009 à 22:07:28    

Bonjour à tous,
connaissez-vous un moyen de précharger les images de mon site avant que le texte et tous les autres éléments s'affichent?
 
merci pour vos reponses
 :hello:

Reply

Marsh Posté le 18-04-2009 à 22:07:28   

Reply

Marsh Posté le 18-04-2009 à 23:13:55    

Tu peux par exemple mettre un gros div au dessus de tout, et lorsque la page un evenement Load, tu le vires
 
un truc comme ca :
 
CSS :

Code :
  1. div#masque {
  2. z-index: 9999;
  3. height: 100%;
  4. width: 100%;
  5. background-color: black;
  6. color: white;
  7. text-align: center;
  8. overflow: hidden;
  9. }


 
ajouter ca au HTML :

Code :
  1. <body>
  2. <div id="masque">Chargement en cours</div>
  3. ...
  4. ...


 
et le JS :

Code :
  1. var masque = function ()
  2. {
  3.  var m = document.getElementById ('masque');
  4.  if (!m)
  5.    return false;
  6.  m.parentNode.removeChild (m);
  7.  return true;
  8. }
  9. document.onload = masque;


 
A tester :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-04-2009 à 11:47:05    

Sauf que les gens sans JS verront rien.
Si tu veux partir sur cette option de masquer en CSS / montrer en JS, ajoute un form avec un bouton "Show Pictures" qui envoie vers la même page mais sans le CSS "masquant" et tu caches ce form grâce à JS.
=> Les utilisateurs avec JS verront la page direct
=> Ceux sans devront presser sur le bouton (un peu chiant mais bon) mais auront quand même les images (et si leur browser fait son boulot comme il faut, ils downloaderont les images qu'une seule fois)


Message édité par esox_ch le 19-04-2009 à 11:48:56

---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 19-04-2009 à 11:54:21    

En effet les gens sans JS ne verront rien, mais il suffit alors de virer le code HTML qui affiche le div, et de générer ce DIV via JS en le définissant comme premier noeud du BODY. Donc si pas de JS, pas de DIV.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-04-2009 à 13:11:02    

En fait , je ne veux pas d'animation de préchargement, je veux juste que les images s'affichent avant le reste du site...

Reply

Marsh Posté le 19-04-2009 à 13:21:33    

Ben ca dépend, il se présente comment ton texte ?
Tu peux utiliser le meême principe que plus haut, sauf que au lieu de cacher toute la page, tu caches (ou tu rends invisible) le texte jusqu'à ce que les images soient chargées.


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-04-2009 à 13:28:53    

quaresma a écrit :

Bonjour à tous,
connaissez-vous un moyen de précharger les images de mon site avant que le texte et tous les autres éléments s'affichent?
 
merci pour vos reponses
 :hello:


quaresma a écrit :

En fait , je ne veux pas d'animation de préchargement, je veux juste que les images s'affichent avant le reste du site...


Quel est l'intérêt de faire un truc pareil [:petrus dei]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-04-2009 à 13:38:03    

masklinn a écrit :


Quel est l'intérêt de faire un truc pareil [:petrus dei]


 
salut,
quelques-unes de mes images sont assez lourdes, donc tout le site s'affiche avant celle-ci...
Voila pourquoi je voudrai qu'elles se chargent avant l'autre contenu ;)
 
 
[:petrus dei]

Reply

Marsh Posté le 19-04-2009 à 13:39:37    

quaresma a écrit :

quelques-unes de mes images sont assez lourdes, donc tout le site s'affiche avant celle-ci...


En quoi est-ce un problème? Ne vaudrait-il pas mieux recompresser les images ou ne présenter que des aperçus plus petits et légers à la place?

quaresma a écrit :

Voila pourquoi je voudrai qu'elles se chargent avant l'autre contenu ;)


C'est complètement con [:petrus75]

Message cité 1 fois
Message édité par masklinn le 19-04-2009 à 13:40:05

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-04-2009 à 13:45:10    

masklinn a écrit :


En quoi est-ce un problème? Ne vaudrait-il pas mieux recompresser les images ou ne présenter que des aperçus plus petits et légers à la place?


 
Pour le design du site, les images doivent avoir la taille que j'ai defini.
 

masklinn a écrit :


C'est complètement con [:petrus75]


 
Merci sympa !! [:petrus75]
 
 

Reply

Marsh Posté le 19-04-2009 à 13:45:10   

Reply

Marsh Posté le 19-04-2009 à 13:45:12    

quaresma a écrit :


 
salut,
quelques-unes de mes images sont assez lourdes, donc tout le site s'affiche avant celle-ci...
Voila pourquoi je voudrai qu'elles se chargent avant l'autre contenu ;)
 
 
[:petrus dei]


 
 
Du coups tu veux que tes visiteurs tombent sur une page blanche le temps qu'il téléchargent les images? T'as pas pensé que tout le monde fera un "back" dans le browser? Applique le conseil de Masklinn, comprime tes images


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 19-04-2009 à 13:47:09    

esox_ch a écrit :


 
 
Du coups tu veux que tes visiteurs tombent sur une page blanche le temps qu'il téléchargent les images? T'as pas pensé que tout le monde fera un "back" dans le browser? Applique le conseil de Masklinn, comprime tes images


 
salut,
je ne peux pas les comprimer plus.
J'ai fait au mieux.  :bounce:  

Reply

Marsh Posté le 19-04-2009 à 13:48:34    

quaresma a écrit :


 
Pour le design du site, les images doivent avoir la taille que j'ai defini.
 


 
Compresser l'image ne modifie pas les dimensions de celle-ci, sauf son "poids" change.
 
Mais comme dit, il est vrai que c'est pas tres courant de devoir attendre que les images soient chargées pour afficher le texte, c'est pourquoi une anim d'attente est un moindre mal dans certain cas ;)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-04-2009 à 13:49:09    

Sinon tu as un site ou une page à nous donner en exemple ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-04-2009 à 14:13:27    

Citation :


 
Compresser l'image ne modifie pas les dimensions de celle-ci, sauf son "poids" change.


 
Je sais :)
 

Citation :

Mais comme dit, il est vrai que c'est pas tres courant de devoir attendre que les images soient chargées pour afficher le texte, c'est pourquoi une anim d'attente est un moindre mal dans certain cas ;)


 
Oui mais pour une seule image c'est un peu bête (sans être mechant)  :wahoo:

Reply

Marsh Posté le 19-04-2009 à 14:14:21    

SICKofitALL a écrit :

Sinon tu as un site ou une page à nous donner en exemple ?


 
C'est un site pro en cours de construction pour mon entreprise.
Je ne peux donc pas vous montrer d'exemple... :sarcastic:

Reply

Marsh Posté le 19-04-2009 à 14:43:42    

quaresma a écrit :

Pour le design du site, les images doivent avoir la taille que j'ai defini.


Et?

quaresma a écrit :

Merci sympa !! [:petrus75]


De rien [:petrus75]

quaresma a écrit :

Citation :

Compresser l'image ne modifie pas les dimensions de celle-ci, sauf son "poids" change.

Je sais :)

Citation :

Mais comme dit, il est vrai que c'est pas tres courant de devoir attendre que les images soient chargées pour afficher le texte, c'est pourquoi une anim d'attente est un moindre mal dans certain cas ;)

Oui mais pour une seule image c'est un peu bête (sans être mechant)  :wahoo:


[:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-04-2009 à 20:09:19    

quaresma a écrit :


 
Merci sympa !! [:petrus75]
 
 


Querasma : inutile de poster une alerte de modération pour si peu. Masklinn te fait savoir que ta solution est ridicule, il ne t'insulte pas. Certes il le fait avec ses mots à lui, mais tu n'es pas visé.
Masklinn : tu te doutes bien de ce que je pourrais te dire, donc bon...

Reply

Marsh Posté le 19-04-2009 à 20:15:22    

c'est bon j'ai trouvé.
 
Il faut juste mettre :
 

Code :
  1. <body onload="MM_preloadImages('images/image1.gif','image2.gif')">

Reply

Marsh Posté le 19-04-2009 à 20:23:09    

Super, comme ça les clients qui ont pas de JS ne verront rien


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 19-04-2009 à 20:32:39    

esox_ch a écrit :

Super, comme ça les clients qui ont pas de JS ne verront rien


Bah si, ça c'est juste pour mettre les images dans le cache du navigateur quand tu sais pas faire des rollovers avec des sprites, ça évite que l'image de base disparaisse et que l'image de hover (d'un menu par exemple) mette 2s à apparaître.

 

Et le MM_, c'est le préfixe du code de dreamweaver :D

Message cité 1 fois
Message édité par masklinn le 19-04-2009 à 20:32:58

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-04-2009 à 21:06:02    

masklinn a écrit :


Bah si, ça c'est juste pour mettre les images dans le cache du navigateur quand tu sais pas faire des rollovers avec des sprites, ça évite que l'image de base disparaisse et que l'image de hover (d'un menu par exemple) mette 2s à apparaître.
 
Et le MM_, c'est le préfixe du code de dreamweaver :D


 
Bah s'il fait ce qu'il a dit, c'est-à-dire attendre que les images soient loadées pour montrer le texte, je pense pas qu'il arrive à le faire pour du JS off ... Ou alors il va s'amuser parce qu'il faut tout cacher, plus tout remontrer avec JS


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 19-04-2009 à 21:39:25    

Je capte pas là, précharger les images ne les affiche absolument pas avant le texte, puisque ca s'éxecute lorsque la page est chargée [:petrus75]


---------------
We deserve everything that's coming...
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed