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