Preload pagina web.

[El_david]

Ciao a tutti.
Avei bisogno di una mano. Sto sviluppando un sito web in html e css.
Ho inserito come background-image del div che contiene tutti gli elementi un immagine di sfondo, avrei la necessità che questa si caricasse prima di tutti gli altri elementi, perchè appare con 2/3 secondi di ritardo.
Quindi ho pensato a un preload dell'immagine in cache, che magari tiene in pending la visualizzazione dell'intera pagina e una volta completato il caricamento mostrerà la pagina.
Ho provato alcuni script trovati sul web relativi a quest'argomento ma la situazione non cambia di una virgola,
anche perchè mi sembra di aver capito che sono per altro tipo di scopi.
Quello che voglio è vedere il sito con un po' di ritardo, ma con lo sfondo di quel div caricato, tutto qui.
Vi ringrazio.

[El_david]

ho bisogno del vostro aiuto!!!

[pabloski]

Puoi impostare l'elemento body con visibilità hidden e poi tramite uno script la cambi al verificarsi dell'evento onload.

[wingman87]

Ti propongo una soluzione alternativa: e se alleggerissi/cambiassi il background?
Ci mette 2/3 secondi con che tipo di connessione? Quanto è grande l'immagine?

Se invece vuoi continuare su questa strada, probabilmente esiste qualcosa di già fatto (fare il preload delle immagini è un problema molto comune), ma volendolo scrivere a mano io farei una cosa del genere:
- crei un div che copra l'intero schermo, e gli dai un id tipo "preloadOverlay"
- poi usi uno script di questo tipo:

backgroundImg = new Image();
backgroundImg.onLoad = function(){
   var overlay = document.getElementById("preloadOverlay");
   overlay.parentNode.removeChild(overlay);
}
backgroundImg.src='sfondoMoltoGrosso.bmp';

Personalmente userei jQuery per agganciare questo codice all'evento ready del document e quindi il codice diventerebbe:

$(document).ready(function() {
   backgroundImg = new Image();
   backgroundImg.onLoad = function(){
      $("#preloadOverlay").remove();
   }
   backgroundImg.src='sfondoMoltoGrosso.bmp';
});

[wingman87]

Originariamente inviato da pabloski

Puoi impostare l'elemento body con visibilità hidden e poi tramite uno script la cambi al verificarsi dell'evento onload.

Sì, puoi anche nascondere il body. Se invece preferisci inserire qualche contenuto puoi mettere il div in overlay con quello che vuoi dentro.

[pabloski]

Originariamente inviato da wingman87

Sì, puoi anche nascondere il body. Se invece preferisci inserire qualche contenuto puoi mettere il div in overlay con quello che vuoi dentro.

In effetti l'uso di div è più elegante e selettivo.