11486 sujets

JavaScript, DOM et API Web HTML5

Changer le src d'une image dès qu'une autre est chargé

Bonjour, je m'explique
J'ai deux image une en JPEG et une en GIF
Et j'aimerais d'abord afficher là JPEG puis dès que le site entier est chargé, démarrer le chargement du gif puis l'afficher à la place de l'image JPEG dès que le GIF à fini de charger.
Je m'y connais très peu en Javascript du coup si vous auriez un script ou des indices je suis prenneur, si vous avez des questions je suis là pour y répondre Smiley smile
Merci d'avance Smiley smile
Bonjour,

C'est un peu bizarre tout ça.

Mais parlons du fonctionnement du navigateur. La balise script (donc le fichier js) est normalement placé avant la balise de fermeture 'body', donc le fichier js est exécuté après le chargement de la page (le dom) donc je comprends pas le fait de charger un jpeg et le remplacer par un gif. Pourquoi ne pas charger le gif directement. Est-ce un loader ?

Sinon, en jquery, il existe $ajax() et $ajaxComplete(). Donc je pense que une fois la page chargée, un appel ajax pour afficher le jpg, puis une fois l'appel ajax terminé, avec $ajaxComplete() changer le jpg pour le gif. Mais je pense que ça revient au même de charger le gif directement puisque, selon moi, le fichier js ne s'exécute qu'une fois le DOM chargé, tant que la balise script est placée avant la fermeture de la balise 'body'.

Bref, je sais pas si j'ai bien compris ou si ce sera utile. Au moins, j'ai essayé, lol.
Non, d'abord je charge la page entière avec le JPEG puis dès que tout est charger je charge le GIF qui est un peu plus lourd (3MO) et je l'affiche à la place du JPEG dès qu'il est chargé.
Pour faire quelque chose de simple, je recommande:
En HTML:

<img id="monImage" src="monImage.jpg" alt="Mon Image">
<img id="imageTemp" src="monImage.gif" alt="Image temporaire" onload="changeImage()">

En CSS:
#imageTemp {display:none;}

En JavaScript:

function changeImage() {
    var imageTemp = document.getElementById('imageTemp');
    var monImage = document.getElementById('monImage');
    monImage.src = imageTemp.src;
}

Sauf erreur de ma part, ça devrait marcher sur tous les navigateurs, même anciens.
Edit: il y a une erreur: sous IE, si l'image 2 est déjà dans le cache du navigateur, l'évènement "onload" ne sera pas exécuté!
J'espère que quelqu'un va trouver une meilleure solution, désolé!
Modifié par PapyJP (06 Jun 2017 - 10:43)
Meilleure solution
Bonjour,

J'essai de créer un tableau qui s'ouvre et se ferme, à partir de deux boutons, l'un pour l'ouverture (fléche vers le bas), et le second pour la fermeture (fléche vers le haut).

L'ouverture du tableau s'effectue bien, avec changement de bouton fléche vers le haut et bas,
mais, bien que la fermeture fonctionne également, le bouton lui reste avec la fléche vers le haut, alors qu'il devrait revenir à l'initial!

Merci de votre contribution

Voici mes codes :
HTML
<td>
<img id="monImage" src="images_htmlh/boutonouvrir.png" onclick="changeImage(); masquer('masquetableau')">
<img id="imageTemp" src="images_htmlh/boutonfermer.png" onclick="changeImage()">
</td>

CSS
#imageTemp
{
display:none;
}
#monImage
{
display:block;
}
Sujet clos
Aller à