Ich möchte mehrere Bilder auf einer Website sehr schnell laden, was ist die beste Methode?

Question

UPDATE: Diese Frage ist veraltet, bitte ignorieren Sie sie

Also meine Idee ist, einen kompletten Manga/Comics auf einmal zu laden, mit einem Fortschrittsbalken, und eine Art Stream zu machen, wie:

• Meine Seite lädt die Basis (HTML+CSS+JS) (natürlich)
• Wie getan, beginne ich das Laden der Bilder (die URLs sind auf JS var gespeichert) von meinem Server, eine zu einer Zeit (oder einige schnellere Weise), so dass ich eine Art von Fortschrittsbalken machen kann.
• ALTERNATIVE: Gibt es eine Möglichkeit, eine komprimierte Datei mit allen Bildern zu laden und im Browser zu dekomprimieren?
• ALTERNATIVE: Ich habe auch daran gedacht, sie als Zeichenketten zu speichern und dann zu dekodieren, sie sind meistens .jpg
• Die Bilder müssen nicht sofort angezeigt werden, ich brauche nur den Rückruf, wenn sie fertig sind.

XTML und HTML5 sind akzeptabel

Wie kann ich am schnellsten eine Reihe von Bildern für meine Website laden?

EDITAR Da @Oded Kommentar.. die Frage ist wirklich, was ist die beste Technologie für das Laden von Bildern und der Benutzer nicht zu warten, jedes Mal, wenn er die "Seite" dreht. Das Ziel ist ein ähnliches Erlebnis wie beim Lesen von Comics im echten Leben.

EDIT2 Wie mir einige Leute zu verstehen gaben, suche ich nach einem Pre-Loader auf Steroiden

EDIT3 Keine css-Technologien werden genügen

Answer 1

Wenn Sie große Bilder in kleinere Teile aufteilen, werden sie auf modernen Browsern aufgrund des Pipelining schneller geladen.

Answer 2

ALTERNATIVE: Gibt es eine Möglichkeit, eine komprimierte Datei mit allen Bildern zu laden und im Browser zu dekomprimieren?

Die Bildformate sind bereits komprimiert. Sie würden nichts gewinnen, wenn Sie sie zusammenfügen und versuchen, sie weiter zu komprimieren.

Sie kann kleben Sie die Bilder einfach zusammen und verwenden background-position um verschiedene Teile von ihnen darzustellen: Das nennt man "Spriting". Aber Spriting ist vor allem für kleinere Bilder nützlich, um die Anzahl der HTTP-Anfragen an den Server zu reduzieren und die Latenzzeit etwas zu verringern; bei größeren Bildern wie Manga-Seiten ist der Nutzen nicht so groß, möglicherweise aufgewogen durch die Notwendigkeit, ein riesiges Bild auf einmal abzurufen, selbst wenn der Benutzer nur die ersten paar Seiten lesen wird.

ALTERNATIVE: Ich dachte auch an das Speichern dann als Zeichenketten und dann decodieren

Was würde das bringen? Die Übertragung als String wäre in den meisten Fällen erheblich langsamer als die Übertragung als Raw Binary. Um sie dann von JavaScript-Strings in Bilder umzuwandeln, müssten Sie data: URLs, die im IE6-IE7 nicht funktionieren und nur eine begrenzte Anzahl von Daten enthalten können. Auch dies ist in erster Linie für kleine Bilder gedacht.

Ich denke, alles, was Sie wirklich wollen, ist ein Standard-Bild-Preloader.

Answer 3

Sie können die Bilder in Javascript vorladen:

var x = new Image();
x.src = "someurl";

Dies würde so funktionieren wie das von Ihnen beschriebene "Speichern des Bildes in Strings".

Answer 4

Spriting

Schauen Sie sich einfach an, wie Facebook das macht: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

Ein Bild, das SCHNELLER geladen wird als eine Reihe kleiner Bilder. Um das Symbol anzuzeigen, erstellen Sie einfach ein Div mit festen Abmessungen und verschieben den Hintergrund darin. Ihr div funktioniert als Viewport für das große Bild. Sie verwenden background-position, um den entsprechenden Teil des Bildes anzusteuern. Alles andere wird ausgeblendet.

Verschiedene Domänen

Was Sie wahrscheinlich nicht wussten: Der Internet Explorer hat eine Höchstzahl von Verbindungen pro Server. Sie können hier darüber lesen: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 ( Hier die genauen Zahlen ).

Das bedeutet, dass ein Benutzer, der den IE7 verwendet, NUR 4 (oder 2) Dateien gleichzeitig von Ihrem Server laden kann, unabhängig von der Geschwindigkeit seiner Internetverbindung.

Um die Dinge zu beschleunigen, könnten Sie einige Subdomains einrichten: server1.mydomain.com, server2.mydomain.com, server3.mydomain.com usw. - und dann kann der Benutzer viele Dateien viel schneller herunterladen, weil Sie verschiedene Hosts verwenden, um verschiedene Dateien bereitzustellen.

Answer 5

Danach beginne ich mit dem Laden der Bilder (die URLs sind in JS var gespeichert) von meinem Server, eines nach dem anderen (oder auf eine schnellere Weg), so dass ich eine Art Fortschrittsbalken machen kann bar.

Ihr Browser lädt bereits den HTML-Code herunter und weiß daher, dass er alle JS/Bilder laden muss, auf die Sie verweisen. Sie versuchen, etwas zu erfinden, das existiert bereits .

Stellen Sie einfach sicher, dass Ihr Manga aus vielen Bildern einer bestimmten Größe besteht, die Sie in Ihrem img Tags. Die meisten Browser haben eine Art Fortschrittsbalken, der anzeigt, dass die Ressourcen für Sie geladen werden. Sie werden das Laden großer Bilder nicht beschleunigen, es sei denn, Sie verbessern entweder die Geschwindigkeit, mit der Ihr Server sie bereitstellt, oder die Internetverbindung Ihrer Nutzer, oder Sie komprimieren sie, um Ihre Bilddateien kleiner zu machen (wahrscheinlich auf Kosten der Bildqualität).