High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Gif au chargement d'une image

Dernière réponse le 23 sep 2008 à 01:43:48 Sieg Hart, le 21 sep 2008 à 02:22:57 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « Gif au chargement d'une image » dans :
Animer une séquence d'images avec Gimp VoirGimp permet, entre autres, de créer une animation en superposant plusieurs images. Cette animation peut alors être sauvée au format gif. Sommaire I. Images utilisées pour notre exemple II. Ouvrir la première image puis les autres en tant...
Insérer un gif animé dans Excel VoirPour insérer une image gif animée dans un classeur Excel, le réflexe est de faire le menu insertion / image, mais cela ne fonctionne pas. C'est normal car l'animation est faite par plusieurs images et l'importation se limite à la première. Pour que...
[PDF] Convertir des PDF en images (JPEG, BMP, GIF, etc...) VoirSi vous avez des documents PDF et que vous voulez les convertir en images (JPEG, GIF, BMP, ou n'importe quel format), de manière à les exploiter, par exemple dans un logiciel d'OCR ou de retouche/création d'images : Note : Cet article présente une...
PHP - Génération d'images VoirPrérequis PHP permet de créer des images au format GIF à l'aide d'une librairie de fonctions prévue à cet effet. La librairie permettant de créer et manipuler des fichiers graphiques se nomme GD, ainsi, pour pouvoir utiliser ces fonctions il faut...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Le format GIF VoirLe format GIF Le format GIF (Graphic Interchange Format) est un format de fichier graphique bitmap (raster) par la société Compuserve. Il existe deux versions de ce format de fichier développées respectivement en 1987 et 1989 : GIF 87a supportant...
Posez votre question Répondre

1

kryoportail, le 21 sep 2008 à 06:25:07

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' : http://mootools.net/ ou 'jquery' : http://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

   
Répondre à kryoportail

2

Sieg Hart, le 21 sep 2008 à 17:39:16

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

   
Répondre à Sieg Hart

3

Sieg Hart, le 21 sep 2008 à 19:12:46

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

   
Répondre à Sieg Hart

4

kryoportail, le 22 sep 2008 à 14:47:24

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

   
Répondre à kryoportail

5

smokey34, le 22 sep 2008 à 14:49:57

C'est sympa la barre de telechargement mais est ce vraiment nécessaire?


http://www.16bit.fr

   
Répondre à smokey34

6

kryoportail, le 22 sep 2008 à 17:23:14

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

   
Répondre à kryoportail

7

Sieg Hart, le 22 sep 2008 à 22:38:35

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

   
Répondre à Sieg Hart

8

 Sieg Hart, le 23 sep 2008 à 01:43:48

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?

   
Répondre à Sieg Hart
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net