Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[résolu] Avoir un gif "chargement" avant affichage d'une

Bazoo

Par Bazoo
dans Programmation

 Partager

Messages recommandés

Bazoo Extrem Member

Bazoo

Posté(e)
Posté(e) (modifié)

Salut à tous! :P

 

J'ai une photo en page d'accueil, que j'ai réussi à faire s'afficher avec un effet de "fading" grâce à un script. Maintenant, j'aimerais qu'un gif que j'ai du genre petite horloge s'affiche pendant que ma photo se charge en arrière-plan. J'ai fait un essai, mais ça ne marche pas avec IE.

 

Je suis débutant, donc je fais plutôt au pif, donc voici mon code, si qqun s'y connaît et peut me dire ce qui cloche, je serai ravi :P :

 

<tr class="loader">
	  <td height="655" colspan="2" align="center" valign="bottom"><img src="snow-days.jpg" alt="Snow Days in Gascony -- France 2006" name="photo" width="985" height="655" align="top" id="photo"></td>
  </tr>

 

"Loader" est défini dans ma CSS :

 

.loader {
 background-image: url(clock-loader.gif) 50% 50% no-repeat;
}

 

J'ai lu sur un site une méthode avec un "div" mais je n'y suis pas arrivé non plus, ça marchait, mais juste sous Opéra...

 

Voilà, j'espère que vous pourrez me conseiller là-dessus!

 

A+!

Modifié par Bazoo
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Voilà comment ça marche avec un bloc <div> (tu donnes ses dimensions dans la feuille de style), en tout cas avec FireFox et InternetExplorer.

 

<html><head>
<style>
.loader {
 background: url(attente.gif) no-repeat center center;
 height:400px;
 width:400px;
}
</style>
</head><body>
<div class="loader">
<img src="image.jpg" alt="" title="">
</div>
</body></html>

Le problème, c'est que, si ton image n'est pas très “lourde”, elle s'affichera instantanément, de sorte que tu n'auras pas le temps même d'apercevoir l'image de fond... :P

 

Il y avait une erreur dans ta feuille de style, tu donnais dans background-image plus que l'URL, et c'est l'attribut-groupe background qui te permet de citer ensemble tout ou partie des attributs de “fond”.

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

L'explication, c'est bien naturel. Trouves-tu logique de prendre à droite à gauche des bouts de code sur la Toile, et d'essayer de les mettre en œuvre sans en comprendre le fonctionnement ? :P

 

Tu devrais prendre le temps de te familiariser avec XHTML/CSS, par exemple en parcourant l'excellent tutoriel du Site du ZérO. Tu découvriras que c'est passionnant, et ensuite tu auras beaucoup plus de facilité et de satisfaction à construire tes pages WEB :P

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...