tempi di caricamento immagini

[abelina]

Ciao a tutti!

Ho un problema con i css e le immagini.
Ho creato una pagina html collegata a style.css.
Ho creato vari box e in alcuni si devono caricare delle immagini.
Ho dato anche un pattern di sfondo al body.
Tutto viene caricato correttamente, ma non nei tempi.
Le immagini si caricano ognuna in un momento diverso e, cosa ancor peggiore, il pattern di sfondo si carica quando metà delle immagini della pagina sono già visibili.

Esiste un metodo per evitare questo inconveniente con i css o con javascript?

Grazie!

[Mich_]

Puoi provare a postare il CSS che usi (oltre all'HTML che fa riferimento a tale CSS), per verificare ceh non ci siano errori CSS (che puoi trovare anceh con i validatori); comunque ci sono poche probabilita` che con i CSS si riesca a modificare quel comportamento.

Se vuoi che lo sfondo si carichi prima questo deve essere leggero (quindi un'immagine il piu` piccola possibile).

Invece e` possibile cambiare l'ordine di caricamento delle immagini nel contenuto, tramite JS (ma potrebbe essere sconsigliabile farlo per problemi di accessibilita`).

[abelina]

Questo è il css:

/* CSS Document */

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(immagini/pattern_righe.jpg);
}

#base {
position: relative;
border: 1px solid;
width: 974px;
height: 568px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 1;
border-color: #999999;
background-image: url(immagini/pattern_scuro.jpg);
}

#albero {
position: absolute;
/*border: 1px solid;*/
width: 293px;
height: 161px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 2px;
top: 0px;
}

#albero1 {
position: absolute;
/*border: 1px solid;*/
width: 293px;
height: 165px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 2px;
top: 161px;
}

#albero2 {
position: absolute;
/*border: 1px solid;*/
width: 293px;
height: 78px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 2px;
top: 326px;
}

#albero3 {
position: absolute;
/*border: 1px solid;*/
width: 197px;
height: 161px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 2px;
top: 404px;
}

#alto {
position: absolute;
/*border: 1px solid;*/
width: 704px;
height: 41px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 3;
border-color: #999999;
left: 269px;
top: 1px;
}

#uno {
position: absolute;
/*border: 1px solid;*/
width: 50px;
height: 497px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 295px;
top: 13px;
}

#due {
position: absolute;
/*border: 1px solid;*/
width: 36px;
height: 465px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 345px;
top: 13px;
}

#tre {
position: absolute;
/*border: 1px solid;*/
width: 591px;
height: 422px;
padding: 10px;
vertical-align: middle;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 381px;
top: 14px;
background-image: url(immagini/pattern_chiaro.jpg);
}

#fascia {
position: absolute;
/*border: 1px solid;*/
width: 591px;
height: 42px;
padding: 0px;
vertical-align: middle;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 381px;
top: 436px;
background-image: url(immagini/pattern_medio2.jpg);
}

#fascia1 {
position: absolute;
/*border: 1px solid;*/
width: 627px;
height: 32px;
padding: 5px;
vertical-align: middle;
text-align: right;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
z-index: 2;
border-color: #999999;
left: 345px;
top: 478px;
background-image: url(immagini/pattern_medio1.jpg);
}

/*testi*/

.testi {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #663300;
font-style: normal;
font-size: 12px;
text-align: justify;
}

mentre questo è l'html:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><table width="974" height="568" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div id="base">
<div id="albero">[img]immagini/parte_01.jpg[/img]</div>
<div id="albero1">[img]immagini/parte_06.jpg[/img]</div>
<div id="albero2">[img]immagini/parte_07.jpg[/img]</div>
<div id="albero3">[img]immagini/parte_08.gif[/img]</div>
<div id="uno">[img]immagini/parte_03.jpg[/img]</div>
<div id="due">[img]immagini/parte_04.jpg[/img]</div>
<div id="tre" class="testi">bla.. bla... bla... bla... bla... ecc....</div>
<div id="alto">
<table width="100%" height="41" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="center" valign="middle">[img]immagini/hp.gif[/img]</td>
<td width="14%" align="center" valign="middle">[img]immagini/t_ospitalita.gif[/img]</td>
<td width="18%" align="center" valign="middle">[img]immagini/t_arrivare.gif[/img]</td>
<td width="25%" align="center" valign="middle">[img]immagini/t_servizi.gif[/img]</td>
<td width="15%" align="center" valign="middle">[img]immagini/t_escursioni.gif[/img]</td>
<td width="13%" align="center" valign="middle">[img]immagini/t_dintorni.gif[/img]</td>
</tr>
</table>
</div>
<div id="fascia"></div>
<div id="fascia1">[img]immagini/hp.gif[/img]</div>
</div>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

grazie!

[Mich_]

Sul CSS si puo` lavorare: probabilmente puo` diventare circa un terzo di quello attuale.

Esempio:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(immagini/pattern_righe.jpg);
}
Puo` diventare:
body {
margin: 0px;
background: url(immagini/pattern_righe.jpg);
}

Idem tutti gli altri: se usi gli attributi compatti risparmi un sacco di byte, e quindi di velocita` di caricamento.
per un reference vedi ad esempio: http://www.w3schools.com/css/css_reference.asp

Anche le immagini: in generale immagini .gif sono piu` leggere delle .jpg.
Se non hai necessita` di grafica raffinata, le .gif sono una scelta migliore.

[abelina]

Grazie, sto incominciando a ripulire il file style.css.
Ho anche alleggerito un poco il pattern, ma ancora mi crea lo stesso problema di prima durante il caricamento.

Se avete qualche altro suggerimento ...