Visuel pendant le rechargement

**php_de_travers** · 25/01/2008, 18h34

Bonjour,

avec Prototype 1.6, j'utilise le code suivant pour rafraichir un div toutes les 20 secondes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body onload="javascript:tester();">
<div id="corps">
<div id="div_1">calque 1</div>
<script type="text/javascript">
// <![CDATA[	
function tester()
{
	elementHTML = document.getElementById('div_1');
	var url = "affiche_heure.php";
	o_options = new Object();
	o_options = {method:'get',frequency:20};
	var laRequete = new Ajax.PeriodicalUpdater(elementHTML,url,o_options); 
}
//]]>
</script>

- existe-t-il d'autres techniques aussi faciles à utiliser (mootools a l'air super mais j'ai rien comprendu) ?
- est-il possible avec Prototype de diffuser un visuel animé pendant le rechargement ?

**karimphp** · 25/01/2008, 22h04

salut
oui il ya des effets de chargement spécifique a mootools tu peut les utilisé , personnellement j'a pas utilisé ces effets je fait simplement des icônes gif

**Darkenshin** · 30/01/2008, 15h10

Salut,

Dans ta requête tu peux mettre "onLoading" avec une fonction qui afficher une image

**php_de_travers** · 30/01/2008, 21h18

Voilà une piste intéressante.
Merci de ton aide.

Sur le site www.prototypejs.org on trouve la mise en garde suivante :

The onUninitialized, onLoading, onLoaded, and onInteractive callbacks are not implemented consistently by all browsers. In general, it's best to avoid using these.

**Darkenshin** · 31/01/2008, 07h38

Salut,

Effectivement comme je ne suis pas aller sur le site

ceci dit cette fonction fonctionne avec FF & IE 6 (6.0.2800.1106 SP1)

C'est aussi ce que j'ai trouvé dans les tuto parlant de notification pendant le chargement

Sinon une petite astuce que j'ai trouvé dans un chat ceci dit, il n'utilise par prototype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//deals with the servers' reply to requesting new content
function handlehHttpReceiveChat()
{
  if (httpReceiveChat.readyState == 4)
	{
		// Show the activity indicator
    indicator_switch();
		// We didn't timeout
		clearTimeout(receiveTimeout);
		results = httpReceiveChat.responseText.split('---'); //the fields are seperated by ---
		if (results.length > 2)
		{
			// Check that the last message wasn't printed before.
			if(lastID < results[results.length-5])
			{
				// Goes through the result one message at a time
				for(i=0;i < (results.length-1);i=i+5)
				{
 
					// Insert the new content into the page
					if(lastID < results[i+1])
					{
						insertNewContent(results[i+1], results[i+2],results[i+3],results[i+4] ,lastID);
					}
				}
				lastID = results[results.length-5];
			}
 
    }
		// We finished, activity so hide the activity indicator.
		setTimeout('indicator_switch();', 1000);
    setTimeout('receiveChatText();', 4000); //executes the next data query in 4 seconds
  }
}
 
function indicator_switch()
{
	if(document.getElementById("act_indicator"))
	{
		var img = document.getElementById("act_indicator");
		if(img.style.visibility == "hidden")
		{
			img.style.visibility = "visible";
		}
		else
		{
			img.style.visibility = "hidden"
		}
	}
}

Visuel pendant le rechargement

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager