High-Tech Santé Médecine Droit-Finances

Test

Sony Vaio NW21EF/S

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...
[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...
Créer une image animée avec REFLET VoirReflet pour créer vos images animées Pourquoi toujours télécharger des images gif sur des sites ? Alors qu'il est plus simple et créatif de créer sa propre image animée ? Le logiciel Reflet vous permet de mettre votre talent de créateur au grand...
Télécharger FastStone Image Viewer VoirFastStone Image Viewer est un visualisateur d'images permettant de convertir et d'afficher la plupart des formats graphiques actuels, à commencer par les formats BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO et TGA. Il possède de nombreuses...
Télécharger Office Image Xtractor Voir
Télécharger A-PDF Image to PDF Voir
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
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...
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