[Java - Ajax] Create un loading di pagina

pix83 · 18-04-2007, 11:02

Come posso creare un "loading" sia per una pagina html che per un DIV???
C'è qualcuno pratico di Ajax che può darmi una mano???

MEMon · 19-04-2007, 12:58

Per loading esattamente cosa intendi?
Io ho visto usare questo termine in ambito flash, esattamente quando si cerca di far vedere qualcosa all'utente durante il caricamento di un'applicazione flash.
E' questo che intendi per caso?

pix83 · 23-04-2007, 15:06

Hai presente JavaScript e Ajax??? volevo creare un loading per quando mi venga caricata ho una pagina html o un DIV...

MEMon · 23-04-2007, 15:22

Ho presente ajax e javascript, ma non mi è mai capitato di dover fare una cosa come quella che chiedi...

Comunque, il problema è che te crei il DIV con dei dati presenti in un database e ci metti un po' a recuperarli?

Fai quelche esempio...

pix83 · 23-04-2007, 17:24

Peta peta, che ti faccio un esempio...

Per le immagini, come in questo sito:
www.ernestomeda.it
Qui utilizza il loading sia per quando carica la pagina, sia per quando clicchi sulle varie immagini (quelle in basso che poi le ricarica nel riquadro).

Per il DIV intendo questi due casi:
www.pixel2life.com
Se clicchi sulle sezioni a sinistra nel menu, quando si apre il DIV sottostante da "please wait...".

altro esempio è questo...
www.dynamicdrive.com
Quando utilizzo i TAB, e passo da uno all'altro, che da l'immagine di caricamento mentre carica il contenuto.

Spero di essere stato chiaro

...
Se ci sono domande chiedi pure, volevo capire come crearli.

MEMon · 23-04-2007, 19:55

Dei tre link vedo solo il please wait del secondo.
Comunque ho fatto un paio di prove, è una cosa del genere che ti interessa?
http://allejp.altervista.org/testPreload.html

pix83 · 24-04-2007, 09:23

Si MEMon!!! così, che poi riesca a utilizzare anche nei Tab (ti lascio il link di un Tab che ho creato per rendere l'idea LINK)...è possibile inserire anche immagini nel loading??? cioè a posto del "Please wait...".

pix83 · 24-04-2007, 11:14

Ma davvero in questo esempio non vedi l'immagine di loading???
http://www.dynamicdrive.com/dynamici...axtabscontent/
viene fuori quando carica l'immagine degli animali...

Ho trovato un'altro esempio, questo:
http://www.ajaxlessons.com/demo/workshop2.html

Il fatto vorrei capire come si possono creare, per poi applicarli in vari siti...sempre se hai tempo, no problem!!!

MEMon · 24-04-2007, 17:48

Certo allora, se te devi caricare una immagine molto "sostanziosa" puoi utilizzare l'evento onload lanciato da una immagine quando ha finito di caricarsi.

Ti ho fatto un piccolo esempio di caricamento di un'immagine con preload formato da una gif.
http://allejp.netsons.org/varie/preload_image.html

qui il codice:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preload immagine</title>
	<script type="text/javascript">
		//Esegue tutto il procedimento per caricare un'immagine.
		function loadImage(){
			var cnt=document.getElementById("image_box");
			cnt.innerHTML="";
			
			//Crea l'immagine da caricare, MA NON L'AGGIUNGE SUBITO!
			var image=new Image();  //Image è un OGGETTO immagine.
			image.setAttribute("id","img");
			image.src="http://allejp.netsons.org/varie/image/AdrianaLima.png?rand="+Math.round(Math.random()*1000);
			image.onload=function(){imageLoaded(image);};
			
			//Crea la gif di caricamento.
			var loading=new Image();
			loading.style.margin="255px 200px 255px 200px";
			loading.src="http://allejp.netsons.org/varie/image/loading.gif";
			
			//Crea un box per contenere l'immagine da visualizzare
			//nel quale viene inserita prima la gif che mostra il
			//caricamento.
			var box=document.createElement("div");
			box.setAttribute("id","box");
			box.appendChild(loading);
			
			//Il box viene aggiunto al contenitore principale
			cnt.appendChild(box);
		}
		
		//Viene chiamata quando l'immagine è pronta, in questo caso
		//viene eliminata la gif di caricamento, sostituita dall'immagine
		//ormai pronta per essere mostrata.
		function imageLoaded(img){
			var box=document.getElementById("box");
			box.innerHTML="";
			box.appendChild(img);
		}
	</script>
</head>
<body>
	<form>
		<input type="button" value="load" onclick="loadImage();"/>
	</form>
	<div id="image_box">
	</div>
</body>
</html>

pix83 · 24-04-2007, 18:10

Si può anche applicare per file da includere???

MEMon · 24-04-2007, 18:11

uhmmm file di che tipo? Comunque sinceramente non saprei... come gli aggiungi i file tu?

pix83 · 24-04-2007, 18:29

Ti faccio un esempio pratico:
Sto facendo questo sito per la mia contrada del paese. Anche se lo sto facendo come volontariato, lo voglio fare bene!!! ti do il link: http://www.pix.netsons.org/sg/.
A sinistra c'è un menu, se clicchi su "chi siamo" si aprirà un menu sottostante con le voci:
Dove trovarci
Quando trovarci
Un pò di storia
Le altre Contrade

Vorrei che quando clicco su una di queste voci mi carichi a destra il testo, e mentre lo carica mi dia il loading. Ho visto vari esempi in rete, ma non riesco a combinarci nulla. Spero di essermi spiegato.

MEMon · 24-04-2007, 18:39

Innanzitutto complimenti, mi piace molto!
Vediamo, immagino tu non abbia intenzione di utilizzare i frame vero?

In tal caso userai o javascript, o ajax giusto?
Se utilizzi javascript, e metti tutto il testo già pronto, che aspetta solo di essere visualizzato, allora il caricamento sarà praticamente ISTANTANEO e non ti servirà nessun loading stanne certo.

Se usi ajax, e quindi il testo proviene da una sorgente esterna quale potrebbe essere un database, allora potrebbe esserci qualche millisecondo di attesa, in questo caso ti basterà visualizzare un'immagine che avverte del caricamento, come una gif animata, oppure una semplice scritta, e non appena ti arrivano le informazioni da aggiungere la togli e metti il testo.
Un po' come ho fatto io con le immagini insomma.

Te che intenzioni avevi?

pix83 · 24-04-2007, 19:06

Grazie! sono fiero che ti piaccia!

Avevo in mente qualcosa di "bello da vedere". In rete ho visto molti esempi (ma haimè porca paletta non li ho salvati in preferiti!), del tipo:
Se clicco su "Dove trovarci", nel DIV contenente il testo a destra compariva l'immagine di loading, nel frattempo il DIV si adattava in lunghezza al testo e compariva il testo. Se poi cliccavo su "Quando trovarci" succedeva la stessa cosa, riadattando il DIV al testo nuovo. Dici che è troppo incasinato fare una cosa del genere???...

Ps. Ho la linea adsl che da i numeri, se non riesco a risponderti subito è perchè va e viene il segnale

MEMon · 24-04-2007, 20:32

No non è troppo complesso, ma sei sicuro fosse html e css e noin flash?

pix83 · 26-04-2007, 08:09

Ti giuro MEMon, era in Ajax, caxxo, è che non trovo più il link

In mattinata se ho poco lavoro ti posto un'esempio...

MEMon · 26-04-2007, 09:35

Bhe ok, in ajax allora puoi fare come ti ho detto, in pratica quando fai la chiamata(prima che ti arrivano i dati) fai vedere una cosa, e quando ti arrivano ci metti i dati.

pix83 · 26-04-2007, 17:32

Ho fatto un nuovo esempio di Tab Menu...qui carica delle foto un po pesanti, quindi si può applicare anche su questo: TAB???

MEMon · 26-04-2007, 17:34

certo

pix83 · 27-04-2007, 15:15

L'ultimo esempio che hai fatto per caricare l'immagine devo cliccare il pulsante, per far si che mi esca il loading senza cliccare nulla??? cioè che appaia subito e poi visualizzi l'immagine. La devo applicare all'ultimo esempio TAB che ho fatto.

P.s.:
Sbaglio o ti piace Adriana Lima

???

18-04-2007, 11:02	#1
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	[Java - Ajax] Create un loading di pagina Come posso creare un "loading" sia per una pagina html che per un DIV??? C'è qualcuno pratico di Ajax che può darmi una mano???

24-04-2007, 09:23	#7
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Si MEMon!!! così, che poi riesca a utilizzare anche nei Tab (ti lascio il link di un Tab che ho creato per rendere l'idea LINK)...è possibile inserire anche immagini nel loading??? cioè a posto del "Please wait...". Ultima modifica di pix83 : 24-04-2007 alle 10:33.

24-04-2007, 19:06	#14
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Grazie! sono fiero che ti piaccia! Avevo in mente qualcosa di "bello da vedere". In rete ho visto molti esempi (ma haimè porca paletta non li ho salvati in preferiti!), del tipo: Se clicco su "Dove trovarci", nel DIV contenente il testo a destra compariva l'immagine di loading, nel frattempo il DIV si adattava in lunghezza al testo e compariva il testo. Se poi cliccavo su "Quando trovarci" succedeva la stessa cosa, riadattando il DIV al testo nuovo. Dici che è troppo incasinato fare una cosa del genere???... Ps. Ho la linea adsl che da i numeri, se non riesco a risponderti subito è perchè va e viene il segnale Ultima modifica di pix83 : 24-04-2007 alle 19:08.

19-04-2007, 12:58	#2
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Per loading esattamente cosa intendi? Io ho visto usare questo termine in ambito flash, esattamente quando si cerca di far vedere qualcosa all'utente durante il caricamento di un'applicazione flash. E' questo che intendi per caso?

23-04-2007, 15:06	#3
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Hai presente JavaScript e Ajax??? volevo creare un loading per quando mi venga caricata ho una pagina html o un DIV...

23-04-2007, 15:22	#4
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Ho presente ajax e javascript, ma non mi è mai capitato di dover fare una cosa come quella che chiedi... Comunque, il problema è che te crei il DIV con dei dati presenti in un database e ci metti un po' a recuperarli? Fai quelche esempio...

23-04-2007, 17:24	#5
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Peta peta, che ti faccio un esempio... Per le immagini, come in questo sito: www.ernestomeda.it Qui utilizza il loading sia per quando carica la pagina, sia per quando clicchi sulle varie immagini (quelle in basso che poi le ricarica nel riquadro). Per il DIV intendo questi due casi: www.pixel2life.com Se clicchi sulle sezioni a sinistra nel menu, quando si apre il DIV sottostante da "please wait...". altro esempio è questo... www.dynamicdrive.com Quando utilizzo i TAB, e passo da uno all'altro, che da l'immagine di caricamento mentre carica il contenuto. Spero di essere stato chiaro ... Se ci sono domande chiedi pure, volevo capire come crearli.

23-04-2007, 19:55	#6
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Dei tre link vedo solo il please wait del secondo. Comunque ho fatto un paio di prove, è una cosa del genere che ti interessa? http://allejp.altervista.org/testPreload.html

24-04-2007, 11:14	#8
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Ma davvero in questo esempio non vedi l'immagine di loading??? http://www.dynamicdrive.com/dynamici...axtabscontent/ viene fuori quando carica l'immagine degli animali... Ho trovato un'altro esempio, questo: http://www.ajaxlessons.com/demo/workshop2.html Il fatto vorrei capire come si possono creare, per poi applicarli in vari siti...sempre se hai tempo, no problem!!!

24-04-2007, 18:10	#10
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Si può anche applicare per file da includere???

24-04-2007, 18:11	#11
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	uhmmm file di che tipo? Comunque sinceramente non saprei... come gli aggiungi i file tu?

24-04-2007, 18:29	#12
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Ti faccio un esempio pratico: Sto facendo questo sito per la mia contrada del paese. Anche se lo sto facendo come volontariato, lo voglio fare bene!!! ti do il link: http://www.pix.netsons.org/sg/. A sinistra c'è un menu, se clicchi su "chi siamo" si aprirà un menu sottostante con le voci: Dove trovarci Quando trovarci Un pò di storia Le altre Contrade Vorrei che quando clicco su una di queste voci mi carichi a destra il testo, e mentre lo carica mi dia il loading. Ho visto vari esempi in rete, ma non riesco a combinarci nulla. Spero di essermi spiegato.

24-04-2007, 18:39	#13
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Innanzitutto complimenti, mi piace molto! Vediamo, immagino tu non abbia intenzione di utilizzare i frame vero? In tal caso userai o javascript, o ajax giusto? Se utilizzi javascript, e metti tutto il testo già pronto, che aspetta solo di essere visualizzato, allora il caricamento sarà praticamente ISTANTANEO e non ti servirà nessun loading stanne certo. Se usi ajax, e quindi il testo proviene da una sorgente esterna quale potrebbe essere un database, allora potrebbe esserci qualche millisecondo di attesa, in questo caso ti basterà visualizzare un'immagine che avverte del caricamento, come una gif animata, oppure una semplice scritta, e non appena ti arrivano le informazioni da aggiungere la togli e metti il testo. Un po' come ho fatto io con le immagini insomma. Te che intenzioni avevi?

24-04-2007, 20:32	#15
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	No non è troppo complesso, ma sei sicuro fosse html e css e noin flash?

26-04-2007, 08:09	#16
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Ti giuro MEMon, era in Ajax, caxxo, è che non trovo più il link In mattinata se ho poco lavoro ti posto un'esempio...

26-04-2007, 09:35	#17
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Bhe ok, in ajax allora puoi fare come ti ho detto, in pratica quando fai la chiamata(prima che ti arrivano i dati) fai vedere una cosa, e quando ti arrivano ci metti i dati.

26-04-2007, 17:32	#18
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	Ho fatto un nuovo esempio di Tab Menu...qui carica delle foto un po pesanti, quindi si può applicare anche su questo: TAB???

26-04-2007, 17:34	#19
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	certo

27-04-2007, 15:15	#20
pix83 Registered User Iscritto dal: Dec 2005 Messaggi: 232	L'ultimo esempio che hai fatto per caricare l'immagine devo cliccare il pulsante, per far si che mi esca il loading senza cliccare nulla??? cioè che appaia subito e poi visualizzi l'immagine. La devo applicare all'ultimo esempio TAB che ho fatto. P.s.: Sbaglio o ti piace Adriana Lima ???

Strumenti
Mostra una versione stampabile Invia questa pagina per email