Sujet Précédent Sujet Suivant

Gif au chargement d'une image

Fermé
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 - 21 sept. 2008 à 02:22
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 - 23 sept. 2008 à 01:43
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.
A voir également:

8 réponses

Réponse 1 / 8
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
21 sept. 2008 à 06:25
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
1
Réponse 2 / 8
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 19
23 sept. 2008 à 01:43
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?
1
Réponse 3 / 8
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 19
21 sept. 2008 à 17:39
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 

<!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
0
Réponse 4 / 8
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 19
21 sept. 2008 à 19:12
A la place j'ai testé ca (c'est pareil mais bon...) 

<!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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
smokey34 Messages postés 4 Date d'inscription lundi 22 septembre 2008 Statut Membre Dernière intervention 22 septembre 2008
22 sept. 2008 à 14:49
c'est sympa la barre de telechargement mais est ce vraiment nécessaire?


https://www.16bit.fr/
0
Réponse 6 / 8
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
22 sept. 2008 à 14:47
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
-1
Réponse 7 / 8
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
22 sept. 2008 à 17:23
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
-1
Réponse 8 / 8
Sieg Hart Messages postés 68 Date d'inscription vendredi 28 avril 2006 Statut Membre Dernière intervention 16 septembre 2009 19
22 sept. 2008 à 22:38
Pour l'histoire du fond du div j'ai trouvé en utilisant une <img> et la plaçant dans une <div> en position absolute.
Merci kryoportail c'est exactement se que je cherchai ;-)

Jquery c'est bien mais des qu'on utilise plusieurs bibliothèque, c'est le bordel...
-1

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Tainavictor -

9 réponses
Gif Instagram ne marche pas par messages
OceaneBD64 -
madmyke -

1 réponse
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses