demarrer un gif de background que quand il est chargé

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : demarrer un gif de background que quand il est chargé

deumilcat

je n'arrive pas a comprendre / trouver sur internet comment utiliser onload dans ce cas de figure (je suis un amateur absolu en prog web)
j'aimerais que le gif ne commence a s'afficher qu'une fois qu'il est completement chargé

- je definis le contenu et structure d'un div et de son background dans une entete 'style' (je fais pas de fichier css séparé , c est plus clair pour moi de tout avoir dans le meme code)

Citation :

.tableau
{
min-width: 990px;
min-height: 360px;
margin: auto;

background : url("A.gif" ) no-repeat center ;[/cpp]
}

- puis je l'affiche avec:

Citation :

<div class="tableau">

texte avec le backgroundgif en dessous

</div>

merci de vos lumieres! ^^

Message édité par deumilcat le 22-02-2015 à 16:03:54

Publicité

SICKofitALL

misanthrope

1) redéfini ta classe .tableau sans y préciser le background-image, où alors précises juste une image statique de ton choix (donc pas une animation gif)
2) crées un deuxieme classe css qui ne contiendra que le background-image de ton gif, mais que tu n'assignes à aucun element
3) via javascript, tu créés une Image, tu lui assignes en source ton gif (le même que la classe vu plus haut), et tu mets sur l'evenement onload un callback qui va changer les elements qui utilisent la classe css "tableau", et là tu ajoutes la deuxieme classe que tu as créés. Comme ca, l'anim en question ne démarre que quand elle est chargée.

en gros :

Code :

// css
.tableau
{
min-width: 990px;
min-height: 360px;
margin: auto;
background: url("A_statique.gif" ) no-repeat center;
}
.tableauAnim {
background: url("A.gif" ) no-repeat center;
}
// html
<div class="tableau">
texte avec le backgroundgif en dessous
</div>
// js
window.onload = function ()
{
var img = new Image ();
img.onload = function ()
{
// IE9+
document.getElementsByClassName ("tableau" ).forEach (function (el) { el.className += " tableauAnim "; });
}
img.src = "A.gif";
}

Pas testé, mais l'idée est là je pense (à noter que tu peux te simplifier le code js et le rendre plus compatible IE en utilisant jQuery)

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

deumilcat

excellent merci ca rejoint les methodes que j'ai trouvé mais avec du code que je comprends ^^ je vais tester ca !

pendant que j'y suis : quand on veut definir deux backgrounds superposés sur une seule classe div (en separant avec une virgule)
est ce qu'il y'a un moyen de definir une taille / un scaling en pourcentage pour chacun dans les arguments? (c est a dire un "background-size" , mais pour chaque)

je parle de cette commande css

Citation :

background : url("banana.gif" ) no-repeat center , url("A.gif" ) no-repeat center ;

SICKofitALL

misanthrope

Oui tui peux, mais à voir pour la compatibilité inter-navigateurs. Il faut mettre la valeur "size" en dernier et séparer celle-ci par un "/" :

Code :

background: url(UNE_IMAGE) no-repeat top right / 100px, url(UNE_AUTRE_IMAGE) no-repeat top left / 50%

doc : https://developer.mozilla.org/en-US [...] background

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

deumilcat

merci j aurais pas pu la deviner celle-la ! :pt1cable:

bon maintenant je veux charger un background different (gif animé lourd qui sucerait trop de forfait datamobile ou un gif fixe light)
selon que c'est un mobile ou un ordi qui navigue le site... des bonnes pistes ici: ^^
http://stackoverflow.com/questions [...] pplication

SICKofitALL

misanthrope

Mouais, utiliser le User-Agent n'est pas une bonne idée je pense, celui-ci étant modifiable et relou à parser.
Regarde du coté des media queries :
http://openclassrooms.com/courses/ [...] ia-queries

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

FORUM HardWare.fr

Programmation

HTML/CSS

demarrer un gif de background que quand il est chargé

Sujets relatifs
Background double	Background / Fond de page HTML sous Blue Griffon
Récuperer le background d'un élément	Background & Media queries
Mise en page CSS, histoire de bien démarrer	Sauvegarde du "Menu démarrer"
background	code pour selection et envoi d'une vidéo à démarrer sur la TV
background "dynamique"
Plus de sujets relatifs à : demarrer un gif de background que quand il est chargé

Page générée en 0.046 secondes