MegaLab.it

Salve a tutti

Oggi creando una pagina web dal contenuto abbastanza pesante, ho notato l'osceno risultato durante il caricamento di tutti gli elementi e le immagini. Insomma sembrano montarsi come i Lego

Allora mi sono chiesto se esisteva un qualche script in javascript che permetteva alla mia pagina di caricarsi in modo nascosto e nel mentre che quest'ultima per l'appunto si caricasse, sul browser comparisse un DIV con all'interno una scritta del tipo Caricamento in corso o magari un immagine fatta da me.

La mia pagina web è formata da un div centrato ( tramite i CSS ho impostato margin left e right su AUTO ) e da due div al suo interno.

Ricapitolando: Vorrei visualizzare un DIV di caricamento e poi dopo farlo scomparire per visualizzare l'altro div che si dovrebbe essere caricato.

Spero di essere stato chiaro, vi supplico di aiutarmi ne ho davvero bisogno

Al momento non mi viene in mente niente di particolare se non:
- La cosiddetta tecnica dell'image preload (se cerchi in Google avrai una montagna di risultati),
- La richiesta della pagina con AJAX (mostri una pagina semivuota all'inizio, e appena è caricata fai la richiesta AJAX per l'ottenimento della parte pesante).

o anche : http://www.appelsiini.net/2007/9/lazy-l ... ery-plugin

Un buon punto di partenza se vuoi approfondire un po' su questa strada è google

Il fatto è questo: non mi serve un preload per le immagini ma per tutta la pagina. Non ricordo dove ma su un sito succedeva così:

Apri sito si visualizzava un Div con dentro tipo = <div>Caricamento in corso...</div> e appena la pagina di dietro aveva caricato tutto il contenuto, il div con la scritta caricamento scompariva e compariva il <div> con il contenuto della pagina!

È un'implementazione della seconda soluzione che ti ho proposto...
A questo punto devi scegliere se usare MooTools o JQuery per farlo.

Se vorei fare con jquery ( che non conosco minimamente ) come dovrei fare andy? ( intanto grazie mille, anche a te ssjx ) =)

Il problema è che JQuery non lo conosco nemmeno io...
Se parliamo di MooTools è un conto, ma con JQ posso solo indicarti la documentazione...

Una domanda importante prima di procedere: la pagina che dici essere pesante è HTML o PHP?

E in php ^^"

A quel punto, devi separare la pagina che ti servirà da copertina (dove scriverai "caricamento in corso") da quella che ti fornisce i dati.
Nella copertina scriverai del codice javascript che includerà la chiamata AJAX alla pagina PHP che ti fornirà i dati. Ti consiglio di inserirla all'interno di una funzione, di modo che sia richiamabile dopo un breve timeout (tipo 500 millisecondi, per aspettare che la pagina di copertina sia completamente carica.
Il pseudocodice per fare ciò è:

Codice: Seleziona tutto

function caricaPagina(){
qui va la chiamata AJAX
}
window.setTimeout("caricaPagina()", 500);

Se usi MooTools, il codice per la chiamata AJAX potrebbe essere qualcosa tipo:

Codice: Seleziona tutto

window.addEvent("domready", function(){
new Request({
url: "tua_pagina_php_separata_per_i_dati.php",
method: "get",
onComplete: function(result){
$("copertina").set("html", result);
}
}).send();
})

Ovviamente va riadattato per adeguarsi ai nomi dei div che tu assegnerai e gli url vanno sistemati, però potrebbe essere una buona partenza.

Se invece usi JQuery, la documentazione è qui
http://api.jquery.com/jQuery.ajax/

Cavolo forse è troppo tardi, ma comunque ho risolto xD

Con questa funzione

function preloader(){
document.getElementById("Caricamento").style.display = "none";
document.getElementById("Contenitore").style.display = "block";
}//preloader
window.onload = preloader;

Prima richiamo un div e poi appena la pagina è carica richiamo l a'ltro.!

Quello che hai fatto però è tutt'altro.
In quel modo tutta la mole di dati deve comunque essere processata al caricamento della pagina e non in modo asincrono.

Andy spè non fuggire ù.ù come te la cavi con javascript? Avrei bisogno di un aiuto T_T su uno script!

Prova a chiedere e vediamo cosa si può fare

Va bene io ci provo! *-* speriamo!

Allora andy io ho trovato questo script http://javascript.html.it/script/vedi/4948/jgrowl/

Se vedi dalla demo, questo script fà si che quando si clicca su qualcosa, comprare la notifica.
Il mio problema però è che questo script invece che apllicarlo all'onclick io lo sto usando su un onmouseOver.
Il punto è questo: vorrei che quando si passasse sopra ad un area comparisse la notifica UNA SOLA VOLTA, e scomparisse quando il mouse esce dall'area dell'onmouseOver.

Per una sola volta intendi una volta e poi basta?
Con "e poi basta" intendo dire che una volta apparso la prima volta, anche se ci torni sopra con il mouse, non appare più.
O vuoi che quando ci passi sopra con il mouse non appaia nuovamente finché il primo messaggio non si è chiuso?

Se la prima ipotesi fosse quella che vuoi fare, è molto facile (appena torno da scuola ti mostro il codice).
Nel secondo caso, invece, ci vuole un po' di più perché bisogna modificare lo script di JGrowl, ma teoricamente è fattibile.

Io vorrei che questi messaggini apparissero solo quando il mouse è sull'area del OnMouseOver e che spariscono quando esco dall'area.! xD

Vediamo se ho capito...
Usa l'attributo onmouseover anziché onclick all'interno del tag che ti rappresenta la superficie interessata.

Infatti è così che ho fatto, il problema è che quando tolgo il mouse, il messaggino non scompare! Ed io vorrei che scomparisse! XD

Per farlo devi aprire il file JS che lo gestisce (che si chiama jquery.growl.js, se hai mantenuto la nomenclatura originale) e cercare la parola life (da me si trova alla riga 109).
Vedrai che di fianco c'è un numero (dovresti trovare 3000): devi modificarlo in qualcosa come 500 per far sì che scompaia dopo mezzo secondo da quando il mouse si sposta dall'area e non dopo tre secondi come da default.

ho provato a fare come hai detto, ma se io resto sull'area onmauseover scompare lo stesso io non voglio che scompaia se sto sull'area onmouse over xD voglio che scompaia solo quando esco dall'area! T_T un casino eh? ç_ç