W tej chwili znalazłem dwie opcje, aby rozwiązać ten problem: Początkowy plik src wszystkich obrazów jest pusty w bazie danych 64
Ta opcja wymaga nie tylko nowoczesnej przeglądarki, ale może być wolniejsza po stronie klienta, ponieważ przeglądarka musi bazować na dekodowaniu danych obrazu w celu wygenerowania obrazu.
Początkowy kod src wszystkich obrazów ma być adresem URL pustego obrazu 1x1
Jest to ruch OK, pod warunkiem, że pusty adres URL obrazu dla wszystkich miejsc obrazu jest dokładnie tym samym adresem URL i ma długi okres trwałości pamięci podręcznej zdefiniowany w nagłówku HTTP „kontrola pamięci podręcznej”. Problem polega na tym, że gdy ładowane są nowe pliki obrazów, kwadraty obrazu będą przeskakiwać do nowego rozmiaru, co może sprawić, że użytkownik nie będzie tak wspaniały.
Prawie idealnym pomysłem jest to ...
Gdy strona się uruchomi, zaprezentuj siatkę z polami o stałym rozmiarze, które mogą pomieścić każdy obraz. Jest ok, jeśli cała siatka nie mieści się na ekranie. Następnie utwórz javascript, który będzie wykonywany po załadowaniu HTML, i w tym javascript utwórz nowy element obrazu i dołącz go do każdej komórki siatki, a następnie ustaw źródło obrazu na poprawny plik obrazu. Rób to, dopóki pierwszy ekran się nie zapełni. następnie wykryj przewijanie w javascript, a następnie, gdy nastąpi przewijanie, powtórz powyższy proces dla nowych komórek.
Teraz, jeśli chcesz tego, co najlepsze z najlepszych, a jakość nie stanowi wielkiego problemu, to zalecam (zaimplementowałem również na mojej stronie) to zbudowanie siatki i ustawienie jej w taki sposób, aby obraz tła tej siatki był arkusz sprite wszystkich obrazów sformatowanych jako kwadraty obrazów. Ta metoda jest elastyczna i szybka do załadowania, ponieważ do wszystkich obrazów wymagane jest jedno żądanie.
Oto szablon HTML do użycia, jeśli chcesz wybrać szybką trasę. Składane są tylko dwa żądania. Kod HTML i jeden obraz. W tym kodzie zakładam, że każdy obraz z arkusza ma 100 pikseli szerokości i 200 pikseli wysokości i że każdy obraz jest idealnie wyrównany obok siebie, bez przerw.
<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>
W moim kodzie dodałem 3 kropki. Oznacza to, że możesz nadal dodawać obrazy, zwiększając liczby i zwiększając pozycję o 100 za każdym razem, pod warunkiem, że arkusz sprite ma tylko jeden rząd obrazów. Ponadto w przypadku niektórych przeglądarek, takich jak Opera, może być konieczne dodanie znaku ujemnego przed wartościami pozycji tła, aby je uruchomić.