Preload: iframe o JS?

**carloscara** · 25-04-2006, 12:18

Ciao a tutti,
non so se la sezione è proprio corretta: la mia è una domanda generica.
Dunque:
Ho un sito con una testata in alto variabile, in sostanza prende a caso un'immagine ad ogni reload (per ora sono 6 immagini diverse, 775 x 100 px, JPG da 40K), vorrei fare in modo di non far aspettare l'utente il caricamento della testata tutte le volte che cambia pagina.

A questo scopo, secondo voi è meglio un preload in Javascript o un Iframe nascosto con dentro tutte e 6 le immagini?

spero di non aver sbagliato sezione

, nel caso spostatemi pure...

grazie

**seed_squall_it** · 25-04-2006, 12:56

40 KB non sono pochissimi se moltiplicati per 6 e caricati tutti insieme...cmq esiste anche un terzo sistema per precaricare le immagini: usare i CSS. Questo ha il vantaggio di non richiedere iframe, frame nascosti o codice JavaScript (che potrebbe essere disabilitato dal browser). In pratica, quello che devi fare è caricare le immagini fuori schermo. Potresti per es. inserire tutti i tag <img /> che ti servono appena dopo il tag <body>, applicare ad ogni tag <img /> la stessa classe (chiamiamola preload) e impostare una regola di stile in questo modo:

codice:

CODICE CSS:

img.preload {
position: absolute;
top: -2000em;
left: 0;
}

CODICE (X)HTML:

<body>
[img]immagine1.jpg[/img]
[img]immagine2.jpg[/img]
[img]immagine3.jpg[/img]
[img]immagine4.jpg[/img]
[img]immagine5.jpg[/img]
[img]immagine6.jpg[/img]
.............

Oppure, soluzione migliore per l'accessibilità, potresti impostare 6 elementi <div> ognuno dei quali ha come sfondo un'immagine ed è posizionato come descritto nella regola CSS precedente:

codice:

CODICE CSS:

div.preload {
position: absolute;
top: -2000em;
left: 0;
}

#img1 {
background-image: url(immagine1.jpg);
}

#img2 {
background-image: url(immagine2.jpg);
}

#img3 {
background-image: url(immagine3.jpg);
}

#img4 {
background-image: url(immagine4.jpg);
}

#img5 {
background-image: url(immagine5.jpg);
}

#img6 {
background-image: url(immagine6.jpg);
}

CODICE (X)HTML:

<body>
<div id="img1" class="preload"></div>
<div id="img2" class="preload"></div>
<div id="img3" class="preload"></div>
<div id="img4" class="preload"></div>
<div id="img5" class="preload"></div>
<div id="img6" class="preload"></div>
.............

Così facendo, le tue immagini sono già tutte presenti nella pagina ma si trovano spostate a sinistra e fuori dall'area visibile del monitor. Inoltre, impostando un offset superiore negativo molto elevato ed espresso in em, aumentando le dimensioni del carattere (con Firefox per es.) sposterai le immagini ancora più a sinistra, evitando di farle comparire anche solo parzialmente nella pagina. Avrai un "ritardo" nella visualizzazione dell'immagine casuale in testata solo la prima volta che l'utente accede alla pagina.

**carloscara** · 25-04-2006, 19:24

Ciao,
ma a questo punto anche l'Iframe dovrebbe essere valido... perché almeno posso fare una pagina dinamica, passando come parametro il numero di immagini...

ha per caso controindicazioni l'Iframe?

grazie

**seed_squall_it** · 25-04-2006, 21:33

Beh, puoi fare la pagina dinamica (sia lato server con PHP o ASP che lato client con JavaScript) anche usando i CSS. Ti basta scrivere le regole di stile per gli elementi con le immagini di sfondo nei tag <style> della sezione head dinamicamente, magari con un ciclo for. E allo stesso modo, puoi scrivere dinamicamente gli elementi <div>. L'iframe ha come controindicazione...che è un frame!

Voglio dire che anche se viene accettato dalla DTD XHTML 1.0 Transitional, non è proprio il massimo in termini di accessibilità. Una pagina formata da frames causa sempre notevoli problemi nella navigazione a persone che usano browser "alternativi" (screen reader e browser testuali in primis). I frames, ad oggi, sono considerati ostacoli alla navigazione per ovvi motivi.

**carloscara** · 26-04-2006, 12:35

Una pagina formata da frames causa sempre notevoli problemi nella navigazione a persone che usano browser "alternativi" (screen reader e browser testuali in primis). I frames, ad oggi, sono considerati ostacoli alla navigazione per ovvi motivi.

È un ostacolo anche se non si vede?

Certo che non saprei come passare un parametro al CSS...

ciao

**seed_squall_it** · 26-04-2006, 19:33

Diciamo che è un "ostacolo" solo per il fatto di essere presente. Può infatti "disorientare" il browser e l'utente, allo stesso modo in cui lo fanno le finestre popup (il focus si sposta dalla pagina attiva ad un'altra finestra o frame).

Per "passare i parametri" al CSS ti basta scrivere gli stili che ti interessano dinamicamente nella pagina (anziché in un file CSS separato). Ad es., supponendo di generare dinamicamente la pagina con PHP, potresti avere una pagina come questa:

codice:

..................
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
<style type="text/css">
<!--[CDATA[
<?php
$i = 6;
for ($n=1; $n<=$i; $n++) {
echo '#img'.$n.' {';
echo 'background-image: url(immagine'.$n.'.jpg);';
echo '}';
}
?>
]]-->
</style>
</head>
<body>
<?php
for ($n=1; $n<=$i; $n++) {
echo '<div id="img'.$n.'" class="preload"></div>';
}
?>
.............

Come vedi dal codice, il foglio di stile è esterno alla pagina, tranne le regole (che vengono stampate dinamicamente) che riguardano i tuoi elementi <div> con impostate le immagini di sfondo. Ti basta modificare il valore della variabile $i all'inizio e potrai inserire tutte le regole (e i relativi <div> a cui esse si riferiscono) che vuoi. Ovviamente, puoi migliorare il codice utilizzando delle funzioni, magari richiamandole da una classe PHP, ma questo sta a te deciderlo. Puoi ovviamente usare anche ASP o JavaScript al posto di PHP.

**carloscara** · 28-04-2006, 11:33

Ma non c'è un modo per caricare le immagini della pagina in un primo tempo, e poi successivamente quelle lì nascoste?

ciao grazie

**carloscara** · 03-05-2006, 12:49

niente?

ho provato con il CSS, effettivamente va bene, solo che mi carica prima quelle e poi quelle della pagina.

Io vorrei caricare prima tutta la pagina e poi successivamente quelle nascoste.

ciao

**seed_squall_it** · 03-05-2006, 13:50

Non puoi avere un controllo così preciso...anche se scrivi i <div> che contengono le immagini di sfondo "nascoste" per ultimi (prima di chiudere il <body>), non è detto che il browser carichi quelle immagini per ultime...potrebbe "restare indietro" con alcune immagini della pagina e quindi, dopo aver caricato quelle nascoste, tornare a caricare quelle che mancano.

**fcaldera** · 03-05-2006, 14:47

una soluzione in javascript che ho proposto qui
http://forum.html.it/forum/showthrea...hreadid=972783

per curiosità cosa succede se come background nei css imposto un file _non_ immagine? Viene precaricato o no? Qualcuno ha provato?

Discussione: Preload: iframe o JS?

Strumenti discussione

Ricerca discussione

Visualizza

Preload: iframe o JS?

Permessi di invio