In diesem Moment habe ich zwei Möglichkeiten gefunden, um dieses Problem zu lösen: Der anfängliche Quellcode aller Bilder ist ein leeres Datenbankbild 64
Diese Option erfordert nicht nur einen modernen Browser, sondern kann auch auf der Clientseite langsamer sein, da der Browser die Bilddaten auf Basis von 64 dekodieren muss, um das Bild zu erzeugen.
Die anfängliche src aller Bilder ist eine URL eines leeren 1x1-Bildes
Es ist in Ordnung, vorausgesetzt, die leere Bild-URL für alle Bild-Slots ist genau dieselbe URL und hat eine lange Cache-Lebensdauer, die im HTTP-Header "Cache-Control" definiert ist. Das Problem dabei ist, dass beim Laden der neuen Bilddateien die Bildquadrate auf die neue Größe springen, was die Benutzererfahrung möglicherweise nicht so wunderbar macht.
Die fast perfekte Idee ist diese ...
Zeigen Sie beim Start der Seite ein Raster mit Feldern fester Größe an, in denen jedes Bild untergebracht werden kann. Es ist in Ordnung, wenn nicht das gesamte Raster auf den Bildschirm passt. Erstellen Sie dann Javascript, das nach dem Laden des HTML-Codes ausgeführt wird, und erstellen Sie in diesem Javascript ein neues Bildelement, hängen Sie es an jede Zelle des Rasters an und setzen Sie die Quelle des Bildes auf die richtige Bilddatei. Tun Sie dies, bis der erste Bildschirm voll ist. Erkennen Sie dann das Scrollen in Javascript und wiederholen Sie beim Scrollen den obigen Vorgang für die neuen Zellen.
Wenn Sie nun das Beste vom Besten wollen und die Qualität kein großes Problem darstellt, empfehle ich (das ich auch auf meiner Website implementiert habe), ein Raster zu erstellen und es so einzustellen, dass das Hintergrundbild dieses Rasters a ist Sprite-Blatt aller Bilder, die als Bildquadrate formatiert sind. Diese Methode ist flexibel und schnell zu laden, da für alle Bilder eine Anforderung erforderlich ist.
Hier ist eine HTML-Vorlage, die Sie verwenden können, wenn Sie den schnellen Weg gehen möchten. Es werden nur zwei Anfragen gestellt. Der HTML-Code und das eine Bild. In diesem Code gehe ich davon aus, dass jedes Bild auf dem Blatt 100 Pixel breit und 200 Pixel hoch ist und dass jedes Bild ohne Lücken perfekt nebeneinander ausgerichtet ist.
<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>
In meinem Code habe ich 3 Punkte hinzugefügt. Das bedeutet, dass Sie weiterhin Bilder hinzufügen können, indem Sie die Zahlen erhöhen und die Position jedes Mal um 100 erhöhen, vorausgesetzt, Ihr Sprite-Blatt enthält nur eine Bildreihe. Bei einigen Browsern wie Opera müssen Sie möglicherweise ein negatives Vorzeichen vor den Hintergrundpositionswerten einfügen, damit sie funktionieren.