Şu anda bu sorunu çözmek için iki seçenek buldum: Tüm resimlerin ilk src'si veri tabanı 64 boş resim olacak
Bu seçenek sadece modern bir tarayıcı gerektirmez, aynı zamanda istemci tarafında daha yavaş olabilir, çünkü tarayıcının görüntüyü üretmek için görüntü verilerini temel alması gerekir.
Tüm görüntülerin ilk src'si boş bir 1x1 görüntünün url'si olur
Tüm resim alanları için boş resim URL'sinin tam olarak aynı URL olması ve HTTP üstbilgisi "cache-control" içinde tanımlanmış uzun bir önbellek ömrüne sahip olması şartıyla, bu bir TAMAM hareketidir. Buradaki sorun, yeni görüntü dosyaları yüklendikçe, görüntü karelerinin yeni boyuta atlayacağı ve bu da kullanıcı deneyimini harika değil.
Neredeyse mükemmel fikir şudur ...
Sayfa başladığında, her görüntüyü barındırabilecek sabit boyutlu kutular içeren bir ızgara sunun. Tüm ızgara ekrana sığmıyorsa sorun değil. Ardından, HTML yüklendikten sonra yürütülen javascript'i oluşturun ve bu javascriptte yeni bir görüntü öğesi oluşturun ve bunu kılavuzun her hücresine ekleyin ve ardından görüntünün kaynağını doğru görüntü dosyasına ayarlayın. İlk ekran dolana kadar bunu yapın. daha sonra javascript içinde kaydırmayı tespit edin ve sonra kaydırma gerçekleştiğinde, yeni hücreler için yukarıdaki işlemi tekrarlayın.
Şimdi en iyinin en iyisini istiyorsanız ve kalite büyük bir endişe değilse, o zaman önerdiğim (siteme de uyguladığım) bir ızgara oluşturmak ve bu ızgaranın arka plan görüntüsü bir görüntülerin kareleri olarak biçimlendirilmiş tüm görüntülerin sprite sayfası. Tüm görüntüler için bir istek gerektiğinden bu yöntem esnek ve hızlıdır.
Hızlı rotaya gitmek istiyorsanız kullanabileceğiniz bir şablon HTML'si. Sadece iki istek yapılır. HTML kodu ve tek resim. Bu kodda, sayfadaki her görüntünün 100 piksel genişliğinde ve 200 piksel yüksekliğinde olduğunu ve her görüntünün boşluk olmadan mükemmel bir şekilde hizalandığını varsayıyorum.
<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>
Koduma 3 nokta ekledim. Bu, sayıları arttırarak ve hareketli grafik sayfanızda yalnızca bir satır görüntü olması koşuluyla konumu her seferinde 100 oranında artırarak görüntü eklemeye devam edebileceğiniz anlamına gelir. Ayrıca, Opera gibi bazı tarayıcılarda, çalışması için arka plan konumu değerlerinin önüne negatif bir işaret eklemeniz gerekebilir.