Reduzieren Sie die HTTP -Anforderungen von 1000 Bildern?

Question

Ich weiß, dass diese Frage vielleicht ein bisschen verrückt klingt, aber ich bin hart, dass vielleicht jemand eine kluge Idee finden könnte:

Stellen Sie sich vor, Sie haben 1000 Miniaturbilder auf einer einzelnen HTML -Seite.

Die Bildgröße beträgt ca. 5-10 kb.

Gibt es eine Möglichkeit, alle Bilder in einer einzelnen Anfrage zu laden? Irgendwie alle Bilder in eine einzelne Datei eingehen…

Oder haben Sie andere Vorschläge in diesem Thema?

Andere Optionen, von denen ich bereits kenne:

CSS Sprites

Faule Last

Set Ablauf von Header

Laden Sie Bilder über verschiedene Hostnamen herunter

Answer 1

Es gibt nur zwei weitere Optionen, die ich mir Ihrer Situation vorstellen kann:

1. Verwenden Sie die "Daten:" -Protokoll und wiederholen Sie eine base64 -codierte Version Ihrer Miniaturansichten direkt in die HTML -Seite. Ich würde dies nicht empfehlen, da Sie diese Bilder nicht im Benutzer Browser zwischenspeichern können.
2. Verwenden Sie den Webspeicher von HTML5, um alle Bilder als Datensätze mit den base64 codierten Bilddaten zu speichern, die als Blobs in einer Spalte gespeichert sind. Sobald die Datenbank auf die Benutzerautomat heruntergeladen hat, verwenden Sie JavaScript, um alle Datensätze durchzuschlafen und die Miniaturansichten auf der Seite mithilfe von JQuery dynamisch zu erstellen. Mit dieser Option müssten Sie warten, bis die gesamte Datenbank im Endbenutzerbrowser heruntergeladen wurde, und sie benötigen einen ziemlich modernen Browser.

.

Wenn die Bilder logisch gruppiert werden können, können CSS Sprites zusätzlich zu allem, was oben genannt wird, auch für Sie funktionieren. Wenn Ihre Miniaturansichten beispielsweise für Bilder an einem bestimmten Tag hochgeladen sind, können Sie möglicherweise eine einzelne Datei für jeden Tag erstellen, der dann am Benutzerbrowser zwischengespeichert werden kann.

Answer 2

Dies geschieht mithilfe eines sogenannten CSS -Sprite. Ein einzelnes Bild mit allen anderen Bildern darin, mit dem jeweiligen Teil, der in der von CSS ausgewählten HTML gewünscht wird.

Siehe ein Tutorial bei http://css-tricks.com/css-Sprites

Answer 3

Es hört sich so an, als ob Sie so etwas wie Spdy wollen Serverschub. Wenn der Client die HTML -Seite (oder das erste Bild) anfordert, ermöglicht SPDY dem Server die anderen Ressourcen, ohne auf weitere Anfragen zu warten.

Dies ist natürlich noch experimentell.

Answer 4

Sie könnten die ausprobieren Montage Befehl von Imagemagick, um ein einzelnes Bild zu erstellen.