Saat ini saya menemukan dua opsi, untuk menyelesaikan masalah ini: Src awal semua gambar menjadi basis data 64 gambar kosong
Opsi ini tidak hanya membutuhkan peramban modern, tetapi juga bisa lebih lambat di sisi klien karena peramban harus meng-decode data gambar untuk menghasilkan gambar.
Src awal semua gambar menjadi url dari gambar 1x1 kosong
Ini adalah langkah OK asalkan URL gambar kosong untuk semua slot gambar persis URL yang sama dan memiliki masa pakai cache yang lama yang ditentukan dalam tajuk HTTP "kontrol-cache". Masalah dengan ini adalah bahwa ketika file gambar baru dimuat, kotak gambar akan melompat ke ukuran baru yang bisa membuat pengalaman pengguna tidak sebagus ini.
Ide yang hampir sempurna adalah ...
Saat halaman mulai, sajikan kotak dengan kotak ukuran tetap yang dapat mengakomodasi setiap gambar. Tidak apa-apa jika seluruh kotak tidak pas di layar. Kemudian buat javascript yang dijalankan setelah HTML dimuat, dan dalam javascript itu, buat elemen gambar baru dan lampirkan ke setiap sel kisi kemudian atur sumber gambar ke file gambar yang benar. Lakukan ini sampai layar pertama terisi. kemudian mendeteksi pengguliran dalam javascript dan kemudian ketika pengguliran terjadi, ulangi proses di atas untuk sel-sel baru.
Sekarang jika Anda menginginkan yang terbaik dari yang terbaik, dan kualitas bukan masalah besar, maka apa yang saya sarankan (yang saya juga terapkan di situs saya) adalah untuk membangun sebuah kisi dan mengaturnya sedemikian rupa sehingga gambar latar belakang kisi itu adalah lembar sprite dari semua gambar yang diformat sebagai kotak gambar. Metode ini fleksibel dan cepat untuk memuat karena satu permintaan diperlukan untuk semua gambar.
Berikut adalah HTML templat untuk digunakan jika Anda ingin pergi rute cepat. Hanya dua permintaan yang dibuat. Kode HTML, dan satu gambar. Dalam kode ini, saya menganggap setiap gambar dari lembar memiliki lebar 100 piksel dan tinggi 200 piksel dan bahwa setiap gambar dengan sempurna disejajarkan satu sama lain tanpa celah.
<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>
Dalam kode saya, saya menambahkan 3 titik. Itu berarti Anda dapat terus menambahkan gambar dengan menambah angka dan dengan menambah posisi sebanyak 100 setiap kali asalkan sprite sheet Anda hanya memiliki satu baris gambar. Juga, dengan beberapa peramban seperti Opera, Anda mungkin perlu menambahkan tanda negatif di depan nilai posisi latar belakang untuk membuatnya berfungsi.