Preloading background di un div.

**davidx88** · 22-01-2013, 17:44

Ciao, inanzitutto mi presento, David da Roma, neo-sviluppatore web certificato "ci provo".
Sto facendo un sito sta venendo bene, riesco ad accontentare ogni richiesta del cliente, anche delle piu esigenti.
Unica cosa che dà fastidio, vi assicuro che è veramente noiosa, è lo sfondo che appare 3/4 secondi dopo tutto il resto. Lo sfondo è inserito come background-image di un div di width 1000px e pesa 280kb.
Ho risolto in parte inserendo questo script

codice:

$(window).load(function() $("#status").fadeOut(); // will first fade out the loading animation $("#preloader").delay(350).fadeOut("slow");

Praticamente, sicuramente lo sapete già, copro il div con una schermata bianca il tempo che carichi le immagini.
Però non mi piace. Non mi piace perchè la schermata bianca dura troppo vorrei che durasse un po' meno e poi non vorrei applicarlo su tutte le pagine, sarebbe brutto l'effetto.
Praticamente vorrei che il background-images venisse caricato in cache prima dell'apertura effettiva di ogni pagina in modo tale non compaia sempre in ritardo ed èvitare di dover coprire con "la schermata bianca" tipo loading in ogni pagina.
Insomma, caricare tutta la pagina prima e poi farla apparire.

Altra cosa BRUTTISSIMA è che su Firefox, a sito aperto, cambio scheda o riduco a icona il browser, dopo 5 minuti riapro la scheda del sito, e ricarica tutte le immagini, quindi di nuovo sfondo in ritardo. Questo solo su firefox.

Ho aperto il tread in questa sezione e chiedo scusa se fosse sbagliata, perchè da quel che mi è parso di capire da una ricerca sul web, il problema potrebbe risolversi sicuramente con javascript, ma anche con html/css.
Cmq se ritenete opportuno spostare, fate pure, grazie.

In conclusione, mi affido alle vostre esperti menti e vi ringrazio in anticipo.
Ciao!

**blackflower** · 22-01-2013, 19:27

Intanto cerca di alleggerire il più possibile l'immagine di sfondo,
280kb sono veramente troppi.

Poi puoi provare con questo codice:

codice:

<script type="text/javascript">
 <![CDATA[//><!--
 var images = new Array()
 function preload() {
 for (i = 0; i < preload.arguments.length; i++) {
 images[i] = new Image()
 images[i].src = preload.arguments[i]
				}
			}
 preload(
 "PERCORSO IMMAGINE" 
			)
		//--><!]]>
</script>

**davidx88** · 23-01-2013, 12:31

grazie! provero appena ho 2 min di tempo. Per quanto riguarda il ricaricamento delle immagini con firefox ogni quavolta che si ritorna alla pagina?

**davidx88** · 23-01-2013, 16:34

Originariamente inviato da blackflower
Intanto cerca di alleggerire il più possibile l'immagine di sfondo,
280kb sono veramente troppi.

Poi puoi provare con questo codice:

codice:

<script type="text/javascript">
 <![CDATA[//><!--
 var images = new Array()
 function preload() {
 for (i = 0; i < preload.arguments.length; i++) {
 images[i] = new Image()
 images[i].src = preload.arguments[i]
				}
			}
 preload(
 "PERCORSO IMMAGINE" 
			)
		//--><!]]>
</script>

Inserito questo script su <head> non è cambiato nulla. Il percorso immagine è dentro le virgolette ed è giusto.
Cosa importante: ho alleggerito al minimo con gimp l'immagine l'ho portato a qualità "10 su 100" in modo da avere una dimensione di 16kb, il problema rimane tale e quale che sia di 280kb o 16kb! Sembra una questione di risoluzione!

**davidx88** · 24-01-2013, 14:29

nessuno mi aiuta?

**blackflower** · 24-01-2013, 22:20

Puoi mettere il link della pagina in questione?
Se il regolamento non lo permette mandamelo in messaggio privato.

**Vincent.Zeno** · 24-01-2013, 22:22

postare il link per motivi tecnici non è reato

**davidx88** · 25-01-2013, 13:05

http://www.davidxdesign.altervista.org/index.htm
tieni conto che lo script postato da te, l'ho inserito in locale, senza ottenere effetto.
Il sito è hostato in un dominio di prova.
Il delay del caricamento dello sfondo è molto evidente su firefox.

**blackflower** · 26-01-2013, 00:46

Nel link che hai messo, l'immagine dello sfondo è ottimizzata?
Perchè a me risulta che sia 2.7MB.
E comunque, ci mette un pò a caricare ma io non vedo il problema che vedi tu e io uso firefox.
Secondo me se riesci ad alleggerire l'immagine od usare un pattern ripetuto risolvi tutto.

Discussione: Preloading background di un div.

Strumenti discussione

Ricerca discussione

Visualizza

Preloading background di un div.

Permessi di invio