Gif au chargement d'une image
Sieg Hart
Messages postés
69
Statut
Membre
-
Sieg Hart Messages postés 69 Statut Membre -
Sieg Hart Messages postés 69 Statut Membre -
Bonjour,
j'ai une page qui charge une image assez volumineuse et je voudrai faire patienter le visiteur avec un petit gif de chargement. Un peu comme quand une lightbox charge l'image.
Quelqu'un sais comment faire?
Cordialement.
j'ai une page qui charge une image assez volumineuse et je voudrai faire patienter le visiteur avec un petit gif de chargement. Un peu comme quand une lightbox charge l'image.
Quelqu'un sais comment faire?
Cordialement.
A voir également:
- Gif au chargement d'une image
- Légender une image - Guide
- Image iso - Guide
- Convertir gif en video - Guide
- Gif instagram marche pas - Forum Instagram
- Reduire taille image - Guide
8 réponses
Bonjour,
Tu peux par exemple mettre tes 2 images dans ton code HTML.
Et tu surveilles l'événement 'onload' qui surviendra après chargement complet de ta grosse image. Lorsque c'est le cas tu appelles une fonction qui sera chargé simplement d'effacer ou supprimer l'image de chargement du DOM.
Si tu n'as jamais surveillé d'événement en Javascript, tu peux utiliser la fonction 'addEventListener', voir : http://www.aliasdmc.fr/coursjavas/cours_javascript89.html attention la fonction est différente sous Internet Explorer !...
Ça peut être sympa de le faire à la mano une fois pour bien comprendre comment cela fonctionne... Mais entre les standards IE et Mozilla, cela devient vite rébarbatif et ennuyeux de programmer pour les uns et pour les autres...
Pour pas te 'prendre la tête', je te conseille d'utiliser rapidement une librairie toute faite comme 'moontools' : https://mootools.net/ ou 'jquery' : https://jquery.com/ Le code que tu feras pour l'un sera compatible avec les autres...
Exemple Jquery :
<div><img id="MYBigFile" src="MYBigFile.jpeg" style="display: none;"><img id="Loading" src="Loading.gif"></div>
// Sur fin de chargement de l'image 'MYBigFile' supprime l'élément 'Loading' et fait apparaitre progressivement (200ms) MYBigFile ....
$('#MYBigFile').load(function () {
$('#Loading').remove();
$('#MYBigFile').show(200);
});
T'avais dit... rapide et simple !....
Note: J'ai pas testé, mais cela doit être quelque chose dans ce gout la !
Amicalement,
S@M...
http://kryoportail.ath.cx
Tu peux par exemple mettre tes 2 images dans ton code HTML.
Et tu surveilles l'événement 'onload' qui surviendra après chargement complet de ta grosse image. Lorsque c'est le cas tu appelles une fonction qui sera chargé simplement d'effacer ou supprimer l'image de chargement du DOM.
Si tu n'as jamais surveillé d'événement en Javascript, tu peux utiliser la fonction 'addEventListener', voir : http://www.aliasdmc.fr/coursjavas/cours_javascript89.html attention la fonction est différente sous Internet Explorer !...
Ça peut être sympa de le faire à la mano une fois pour bien comprendre comment cela fonctionne... Mais entre les standards IE et Mozilla, cela devient vite rébarbatif et ennuyeux de programmer pour les uns et pour les autres...
Pour pas te 'prendre la tête', je te conseille d'utiliser rapidement une librairie toute faite comme 'moontools' : https://mootools.net/ ou 'jquery' : https://jquery.com/ Le code que tu feras pour l'un sera compatible avec les autres...
Exemple Jquery :
<div><img id="MYBigFile" src="MYBigFile.jpeg" style="display: none;"><img id="Loading" src="Loading.gif"></div>
// Sur fin de chargement de l'image 'MYBigFile' supprime l'élément 'Loading' et fait apparaitre progressivement (200ms) MYBigFile ....
$('#MYBigFile').load(function () {
$('#Loading').remove();
$('#MYBigFile').show(200);
});
T'avais dit... rapide et simple !....
Note: J'ai pas testé, mais cela doit être quelque chose dans ce gout la !
Amicalement,
S@M...
http://kryoportail.ath.cx
Et pour les .png ca marche aussi?
Pour la page que je voulais ça marche nickel (avec des .jpg), j'ai voulu tester pour une autre page et ca marche pas :S
j'ai essayé de faire comme ca
http://interface.eyecon.ro/demos/carousel.html
Mais les miniatures, ben c'est bizarre, parfois le .gif s'affiche et reste sur certaine images, parfois c'est le tour d'autre images alors qu'elles sont sensé être en cache...
C'est peut être du a l'utilisation de multiple librairies?
Pour la page que je voulais ça marche nickel (avec des .jpg), j'ai voulu tester pour une autre page et ca marche pas :S
j'ai essayé de faire comme ca
http://interface.eyecon.ro/demos/carousel.html
Mais les miniatures, ben c'est bizarre, parfois le .gif s'affiche et reste sur certaine images, parfois c'est le tour d'autre images alors qu'elles sont sensé être en cache...
C'est peut être du a l'utilisation de multiple librairies?
Merci de ta réponse.
J'avais envisagé le Jquery mais ... comment dire ... je comprend pas trop la mise en place de ton exemple :S
J'ai ma page, j'inclus le jquery.js, je met mon image dans div que tu m'a donné, mais après la fonction que tu m'a donné je l'utilise comment???
J'ai 5fichiers :
-Une image bien lourde a charger
-un petit gif de chargement
-un .html avec cela dedans
-le pack jquery
-le fct.js avec la fonction dedans
Mais j'ai que le gif qui s'affiche, l'image lourde s'affiche jamais :S
J'avais envisagé le Jquery mais ... comment dire ... je comprend pas trop la mise en place de ton exemple :S
J'ai ma page, j'inclus le jquery.js, je met mon image dans div que tu m'a donné, mais après la fonction que tu m'a donné je l'utilise comment???
J'ai 5fichiers :
-Une image bien lourde a charger
-un petit gif de chargement
-un .html avec cela dedans
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
<title>Exemple</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="fct.js"></script>
</head>
<body>
<div><img id="MYBigFile" src="image_1900x1200.jpg" style="display: none;"><img id="Loading" src="loading.gif"></div>
</body>
</html>
-le pack jquery
-le fct.js avec la fonction dedans
$('#MYBigFile').load(function () {
$('#Loading').remove();
$('#MYBigFile').show(200);
});
Mais j'ai que le gif qui s'affiche, l'image lourde s'affiche jamais :S
A la place j'ai testé ca (c'est pareil mais bon...)
et
Ça marche, mais l'image lourde ne s'affiche pas d'un coup, c'est comme si elle n'avais pas encore fini d'etre chargé.
et surtout, l'image que je voudrai charger est le fond d'un div que j'appelle comme ca
Comment faire si c'est pas un <img>mais le fond d'un div???
Et j'ai beau changer le "show" par un "fadeIn" ça change rien :S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
<title>Exemple</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="fct.js"></script>
</head>
<body>
<div id="UN"><img id="MYBigFile" src="[AnimePaper]wallpapers_Macross-Frontier_Anime-SEED-Otaku(1.58)_1900x1200_82467.jpg"></div>
<div id="DEUX"><img id="Loading" src="loading.gif"></div>
</body>
</html>
et
$(function(){
$("#MYBigFile").load(function () {
$("#DEUX").remove();
$("#UN").show(200);
});
Ça marche, mais l'image lourde ne s'affiche pas d'un coup, c'est comme si elle n'avais pas encore fini d'etre chargé.
et surtout, l'image que je voudrai charger est le fond d'un div que j'appelle comme ca
<div id="conteneur" style="background:url(images/fond/fond_accueil.jpg) no-repeat;">
Comment faire si c'est pas un <img>mais le fond d'un div???
Et j'ai beau changer le "show" par un "fadeIn" ça change rien :S
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Re,
Argh ! Je crois que les images enregistrées en JPEG 'progressive' déclenche l'événement 'onload' dès le début de leur téléchargement, cela pourrait être un début d'explication...
Amicalement,
S@M...
http://kryoportail.ath.cx
Argh ! Je crois que les images enregistrées en JPEG 'progressive' déclenche l'événement 'onload' dès le début de leur téléchargement, cela pourrait être un début d'explication...
Amicalement,
S@M...
http://kryoportail.ath.cx
Re,
Je t'ai fait un exemple : http://kryoportail.ath.cx/test/test.html
Tu n'as cas regarder et modifier le source si tu veux....
Par contre en image de fond, je ne suis pas sur que ce soit possible et comme l'a dit 'smokey34', pas forcement indispensable... Puisque par définition, une image de fond doit se charger rapidement puisque faisant partie du design de ton site ...
Ou pour résonner dans le sens inverse, si ton image est longue a charger, c'est qu'elle est importante pour le contenu de ton site, par conséquent la balise la mieux adaptée à la situation est la balise 'img'.
Cordialement,
S@M...
http://kryoportail.ath.cx
Je t'ai fait un exemple : http://kryoportail.ath.cx/test/test.html
Tu n'as cas regarder et modifier le source si tu veux....
Par contre en image de fond, je ne suis pas sur que ce soit possible et comme l'a dit 'smokey34', pas forcement indispensable... Puisque par définition, une image de fond doit se charger rapidement puisque faisant partie du design de ton site ...
Ou pour résonner dans le sens inverse, si ton image est longue a charger, c'est qu'elle est importante pour le contenu de ton site, par conséquent la balise la mieux adaptée à la situation est la balise 'img'.
Cordialement,
S@M...
http://kryoportail.ath.cx
