Un gif qui se lance après son chargement
Marmotte
-
alexisbbb Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
alexisbbb Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je voudrais qu'une image ne s'affiche qu'après son chargement.
J'ai créer un gif assez lourd, mais qui ne doit s'éxécuter une seul fois à l'ouverture de la page. Le problème c'est qu'avec des ordinateur de faible connexion comme le mien, le gif est saccadé à l'ouverture.
Je cherche donc un script qui me permette de charger le gif avec le chargement normal de la page et qu'il ne s'éxécute qu'une fois la page entièrement charger, pour que la visualisation soit fluide.
Que la solution soit HTML JS ou PHP ne me dérange pas.
Merci d'avance pour votre aide.
Je voudrais qu'une image ne s'affiche qu'après son chargement.
J'ai créer un gif assez lourd, mais qui ne doit s'éxécuter une seul fois à l'ouverture de la page. Le problème c'est qu'avec des ordinateur de faible connexion comme le mien, le gif est saccadé à l'ouverture.
Je cherche donc un script qui me permette de charger le gif avec le chargement normal de la page et qu'il ne s'éxécute qu'une fois la page entièrement charger, pour que la visualisation soit fluide.
Que la solution soit HTML JS ou PHP ne me dérange pas.
Merci d'avance pour votre aide.
A voir également:
- Chargement gif
- Convertir gif en video - Guide
- Logitech g hub chargement infini ✓ - Forum Logiciels
- Smart iptv bloqué au chargement - Forum Box et Streaming vidéo
- Application gif gratuit - Télécharger - Animation
- Comment créer un gif - Guide
2 réponses
désolé Canarder, mais en faite c'est possible, il existe une solution assez simple.
A force de creuser et chercher, j'ai réussie à trouver une astuce. Donc pour tous ceux qui recherche la possibilité de retarder l'affichage d'une image ou d'un gif après le chargement de la page
//// fonction onload dans la body pour que cela s'éxécute aprés le chargement
<body onload="affiche_image()">
les lignes qui suivent sont à mettre dans la body
et peuvent se répéter autant de fois qu'il y a d'images à retarder
en changeant les noms...
//// une image avec l'attribut style="display:none" alt="" se charge
//// mais ne s'affiche pas. c'est un préchargement.
<img src="files/MatCom/adresse_img1.gif" style="display:none" alt="">
//// L'image dans laquelle va s'afficher l'image attendu
//// on peut y loger une image d'attente beaucoup moins lourde
<form name='sel'>
<img src='files/MatCom/adresse_img_d'attente.jpg' width='650px' align='center' name="Img1">
</form>
//// et le fameux script qui affiche l'image
<script type="text/javascript">
function afffiche_image()
{
document.sel.Img1.src='files/MatCom/adresse_img1.gif';
}
</script>
A force de creuser et chercher, j'ai réussie à trouver une astuce. Donc pour tous ceux qui recherche la possibilité de retarder l'affichage d'une image ou d'un gif après le chargement de la page
//// fonction onload dans la body pour que cela s'éxécute aprés le chargement
<body onload="affiche_image()">
les lignes qui suivent sont à mettre dans la body
et peuvent se répéter autant de fois qu'il y a d'images à retarder
en changeant les noms...
//// une image avec l'attribut style="display:none" alt="" se charge
//// mais ne s'affiche pas. c'est un préchargement.
<img src="files/MatCom/adresse_img1.gif" style="display:none" alt="">
//// L'image dans laquelle va s'afficher l'image attendu
//// on peut y loger une image d'attente beaucoup moins lourde
<form name='sel'>
<img src='files/MatCom/adresse_img_d'attente.jpg' width='650px' align='center' name="Img1">
</form>
//// et le fameux script qui affiche l'image
<script type="text/javascript">
function afffiche_image()
{
document.sel.Img1.src='files/MatCom/adresse_img1.gif';
}
</script>
J'essaye de faire cette manip afin que le gif s'affiche seulement lorsqu'il est complètement chargé (à la place de l'image d'attente).
J'ai l'impression que le gif se charge, mais il ne remplace pas l'image d'attente...
Je suis vraiment débutant, l'erreur doit être assez basique...
Merci d'avance!
Voici la page en question =
http://alexis-beauclair.com/lagonrevue/anim2
et le code =