demarrer un gif de background que quand il est chargé

Marsh Posté le 22-02-2015 à 15:49:37

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

Reply

Marsh Posté le 22-02-2015 à 15:49:37

Reply

Marsh Posté le 22-02-2015 à 23:05:59

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...

Reply

Marsh Posté le 23-02-2015 à 08:28:52

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 ;

Reply

Marsh Posté le 23-02-2015 à 09:36:32

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...

Reply

Marsh Posté le 23-02-2015 à 11:28:26

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

Reply

Marsh Posté le 23-02-2015 à 12:57:32

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...

Reply

demarrer un gif de background que quand il est chargé

Sujets relatifs:

Leave a Replay