Jquery: loading div

Se la pagina contiene numerose immagini e rischiamo un caricamento troppo lento attraverso Jquery possiamo impostare un overaly in trasparenza che scompare alla fine del caricamento dell'ultima immagine presente in pagina.

Come sempre occorre prima di tutto caricare l'ultima versione di Jquery, (qui l'articolo), poi impostiamo le regole css del div che scomparirà al completo caricamento:

#welcome-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2000px;

    z-index: 10000;
    overflow: hidden;
    background: navy;
    taxt-align: center;
    opacity: 0.9;
    color: orange;
    font-size: 24px;
    font-weight: bold;
}

Sono necessarie le prime sei proprietà con cui portiamo il div in primo piano, lo posizioniamo all'angolo superiore sinistro, larghezza al massimo dell'area disponibile e altezza adatta a risoluzioni altissime!

Un piccolo trucco: per evitare che questa altezza produca la presenza di barre di scorrimento, nel css impostiamo anche un'altra regola

body {
overflow: hidden;   
}

Ed ora la chiamata dello script

  $(function(){
    $("body img:last").load(function() {($("#welcome-screen").fadeOut('slow')) , $('body').css('overflow', 'auto')   });
   
  });

Come si può notare quando termina il caricamento dell'ultima immagine compresa nel body il div welcome-screen va in fade out e viene ripristinato l'overflow auto sul body del documento.

Non resta che provarlo, ad esempio facendo caricare un'immagine di grandi dimensione esterna!

<div id="welcome-screen"> loading .... </div>
<img src="https://atipicisportivi.files.wordpress.com/2011/02/alex.jpg" width="3000" height="2000" />