In questo momento ho trovato due opzioni per risolvere questo problema: l'src iniziale di tutte le immagini deve essere un'immagine vuota della base di dati 64
Questa opzione non richiede solo un browser moderno, ma può essere più lenta sul lato client poiché il browser deve decodificare in base 64 i dati dell'immagine per produrre l'immagine.
Lo src iniziale di tutte le immagini deve essere un URL di un'immagine 1x1 vuota
È una mossa OK a condizione che l'URL dell'immagine vuota per tutti gli slot immagine sia esattamente lo stesso URL e che abbia una lunga durata della cache definita nell'intestazione HTTP "controllo cache". Il problema è che quando i nuovi file di immagine vengono caricati, i quadrati delle immagini passeranno alle nuove dimensioni, il che potrebbe rendere l'esperienza dell'utente non così meravigliosa.
L'idea quasi perfetta è questa ...
All'avvio della pagina, presenta una griglia con riquadri di dimensioni fisse in grado di accogliere ogni immagine. Va bene se l'intera griglia non si adatta allo schermo. Quindi crea javascript che viene eseguito dopo il caricamento dell'HTML e in quel javascript, crea un nuovo elemento immagine e collegalo a ciascuna cella della griglia, quindi imposta l'origine dell'immagine sul file immagine corretto. Fallo finché la prima schermata non si riempie. quindi rileva lo scorrimento all'interno di JavaScript e quindi quando si verifica lo scorrimento, ripeti il processo sopra descritto per le nuove celle.
Ora, se vuoi il meglio del meglio e la qualità non è una grande preoccupazione, allora quello che raccomando (che ho implementato anche sul mio sito) è di costruire una griglia e impostarla in modo tale che l'immagine di sfondo di quella griglia sia un foglio sprite di tutte le immagini formattate come quadrati di immagini. Questo metodo è flessibile e veloce da caricare poiché è richiesta una richiesta per tutte le immagini.
Ecco un modello HTML da utilizzare se vuoi seguire la strada più veloce. Vengono fatte solo due richieste. Il codice HTML e l'immagine. In questo codice, suppongo che ogni immagine del foglio abbia una larghezza di 100 pixel e un'altezza di 200 pixel e che ogni immagine sia perfettamente allineata l'una accanto all'altra senza spazi vuoti.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
Nel mio codice ho aggiunto 3 punti. Ciò significa che puoi continuare ad aggiungere immagini aumentando i numeri e aumentando la posizione di 100 ogni volta a condizione che il tuo foglio sprite abbia solo una riga di immagini. Inoltre, con alcuni browser come Opera, potrebbe essere necessario aggiungere un segno negativo davanti ai valori di posizione in background per farli funzionare.