due consigli su come iniziare.

[marcopa]

Salve Ragazzi,
sto cercando di studiare il jquery e javascript, ma sto avendo dei problemi in partenza, leggendo tra i manuali online, stavo studiando le due funzioni e le loro differenze per capire come usarle.
$(document).ready e $(window).load
Sto provando a fare un banale preload con una gif che voglio vedere finchè un contatore che parte da zero arriva a 100, quindi deve interrompersi dandomi un alert. Invece non vedo nessuna riga incrementata nella div="foto" ma dopo l'alert di $(window).load le evidenzia tutte insieme.
Banale per voi, sicuramente, ma non riesco a capire, ho scritto il codice, provo a postarlo se qualcuno può aiutarmi a capire.
Grazie in anticipo.

<style>
body {
    overflow: hidden;
}
 
#startLoader {
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
}


</style>

<script type="text/javascript">
var i=0;


$(window).load( function() {
           alert("window is loaded");
           $('#startLoader').hide();
});


function startLoader() {
    setTimeout(function(){
        $('#startLoader').hide();
        $('body').css({'overflow':'auto'});
        }, 1000);
}
 
$(document).ready(function(){
       for (i=0; i<=999; i++){
          $('#foto').append('Sono appena stato aggiunto ('+ i +')<br/>');
        }
       startLoader();     
});


</script>
<div id="startLoader"></div>


<div id="foto"></div>


</body>
</html>

[tampertools]

In una pagina così gli eventi ready e load vengono eseguiti pressoché contemporaneamente.
Quindi succede che l'alert blocca tutte le altre funzioni e le righe vengono aggiunte solo dopo che clicchi su "ok".

Per provare la differenza tra ready e load prova ad aggiungere nella pagina un'immagine di qualche mega che sia online: subito vengono aggiunte le righe e quando si è caricata l'immagine viene eseguito il $(window).load

[marcopa]

Grazie per la risposta Tampertools
in effetti, inserendo un'immagine noto la differenza, ma non è quello che volevo fare! mi puoi dire dove posso trovare
online qualche indicazione?
Io vorrei capire come inserire un preloader sopra in trasparenza che impedisca di usare la pagina di sotto, dove sta caricando dei dati
che possono essere immagini o una ricerca in database!
Poi quando finisce la ricerca deve sparire la gif con la pagina in trasparenza da sopra e mettere il focus sulla pagina iniziale.

[tampertools]

Dunque... finché la pagina non viene inviata al client non puoi mostrare un preloader... quindi se il server ci mette 10 secondi per elaborare una pagina per 10sec+tempoCheLaPaginaCiMetteAdArrivareAlClient avrai una pagina bianca.

Comunque puoi provare così:

...
<div id="loading">
    <img src="loading.gif">
</div>
<!-- tutto il resto della pagina -->

// css
#loading {
  width: 100%;
  heigth: 100%;
  position: fixed;
  background: white;
  opacity: 0.5;
}

// javascript
$(window).load(function () {
  $("#loading").css("display", "none");
});

[marcopa]

Grazie per la tua cortesia,
dunque dal momento che io clicco su una ipotetica icona lancio il preloader
nel tuo esempio invece, il $(window).load mi richiama il #loading quindi la visualizzazione della gif
ma quindi il $(window).load avviene prima del $(document).ready ? qui mi confused!

[marcopa]

No! sorry ho appena scritto il contrario!!
Ora approfondisco su quello che mi hai detto.
Grazie ancora.!

[tampertools]

Quello che ho fatto io è questo:
di default la pagina è con l'immagine del loading aperta. Al $(window).load la nascondo.

Comunque $(document).ready avviene quando è stato caricato il dom (la struttura della pagina), invecie $(window).load quando è stato caricato tutto: dom+immagini+altre risorse