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

Question

UPDATE: Diese Frage ist veraltet, ignorieren Sie bitte

So .. meine Idee ist, eine vollständige Manga/Comics auf einmal zu laden, mit einem Fortschrittsbalken enthalten, und eine Art von Strom zu machen, wie:

• Meine Seite lädt den Grund (HTML + CSS + JS) (natürlich)
• Wie getan, beginne ich die imgs Laden (die URLs auf JS var gespeichert sind) von meinem Server, eine einer Zeit (oder einig schneller), damit ich eine Art Fortschrittsbalken erstellen kann.
• ALTERNATIVE: Gibt es eine Möglichkeit, eine Komprimierungsdatei mit allen Imgs zu laden und im Browser zu dekomprimieren?
• ALTERNATIVE: Ich dachte auch dann als Zeichenfolgen zu speichern und dann dekodieren sie sind meist .jpg
• Die Bilder müssen sofort nicht zeigen, ich muss nur den Rückruf, wenn sie fertig sind.

XTML und HTML5 ist akzeptabel

Was ist der schnellste Weg, um eine Reihe von Bildern für meine Website zu laden?

EDIT Seit @Oded Kommentar .. die Frage ist wirklich, was die beste Technologie zum Laden von Bildern und dem Benutzer nicht über die ‚Seite‘ warten, jedes Mal ist, dreht. Eine ähnlichere Erfahrung anzustreben wie wenn man Comics im wirklichen Leben liest.

EDIT2 Da einige Leute mir geholfen, zu realisieren, ich bin auf der Suche nach einem Pre-Loader auf Steroiden

EDIT3 Keine css Techs

Answer 1

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

Answer 2

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

Bildformate sind bereits komprimiert. Sie würden nichts gewinnen, wenn Sie nähen und versuchen, sie weiter zu komprimieren.

Sie können können einfach die Bilder zusammenkleben und background-position verwenden, um verschiedene Teile von ihnen anzuzeigen: das wird "spritzend" genannt. Aber Sprites sind vor allem für kleinere Bilder nützlich, um die Anzahl der HTTP-Anfragen auf dem Server zu reduzieren und die Latenz etwas zu reduzieren. für größere Bilder wie Mangaseiten ist der Nutzen nicht so groß, möglicherweise aufgewogen durch die Notwendigkeit, ein riesiges Bild auf einmal zu holen, selbst wenn der Benutzer nur die ersten paar Seiten lesen wird.

ALTERNATIVE: Ich dachte auch dann als Zeichenfolgen zu speichern und dekodieren dann

Was würde das erreichen? Die Übertragung als String wäre in den meisten Fällen wesentlich langsamer als die rohe Binärdatei. Um sie dann von JavaScript-Zeichenfolgen in Bilder zu bringen, müssten Sie data: URLs verwenden, die in IE6-IE7 nicht funktionieren, und auf die Menge der Daten beschränkt sind, die Sie in sie einfügen können. Dies ist wiederum hauptsächlich für kleine Bilder gedacht.

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

Answer 3

Wie getan, beginne ich die imgs Laden (die URLs werden auf JS var gespeichert) von meinem Server, der eine ein Mal (oder eine schnelle Weise), so kann ich eine Art von Fortschritt bar machen.

Ihr Browser lädt bereits den HTML-Code, so dass er alle von Ihnen referenzierten JS/Bilder laden kann. Sie versuchen etwas zu erfinden, das bereits existiert.

Stellen Sie nur sicher, dass Ihr Manga aus vielen Bildern einer bekannten Größe besteht, die Sie in Ihren img Tags angeben. Die meisten Browser haben eine Art Fortschrittsbalken, der anzeigt, dass Ressourcen für Sie geladen werden. Sie werden große Bilder nicht schneller laden, wenn Sie nicht entweder die Geschwindigkeit verbessern, mit der Ihr Server sie bedient, oder die Internetverbindung Ihres Benutzers, oder Sie komprimieren, um Ihre Bilddateien zu verkleinern (wahrscheinlich auf Kosten der Bildqualität).

Answer 4

Sie können die Bilder in Javascript mit Vorspannung:

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

Dieses wie das funktionieren würde man als „in Strings Speichern des Bildes“.

Answer 5

Hinweis: JPG und PNG sind bereits komprimiert.

Sie können versuchen, eine "CSS Sprites" -Technik zu verwenden. Im Grunde ist die Idee, dass Sie Ihr Lieblings-Bildbearbeitungsprogramm verwenden, um alle Ihre Bilder in einem einzigen Bild zu speichern. Es ist schneller, dies zu senden, weil Sie den Aufwand für die Datei/Datei verlieren, wenn Sie das Bild kodieren und das Bild senden. Auf der Client-Seite verwenden Sie CSS, um nur den Teil des Gesamtbildes auszuwählen, der an einer Stelle verwendet wird.

http://www.alistapart.com/articles/sprites/
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

UND/ODER

können Sie verzögertes Laden nur Last Bilder verwenden, wenn sie in den Blick kommen.
http://www.appelsiini.net/projects/lazyload

Answer 6

Hier ist etwas, das Sie versuchen können, die durch Zufall gerade codiert up I:

(function() { 
    var imgs = [ "image1.png", "image2.png", ... /* all your image names */ ], 
    index = 0, 
    img; 

    function loader() { 
    if (index >= imgs.length) return; 
    (img = new Image()).onload = loader; 
    setTimeout(function() { img.src = "/path/to/images/" + imgs[index++]; }, 1); 
    } 

    loader(); 
})(); 

Plop alle Bildnamen (oder die, die Sie vorab zu laden wollen) in das Array, und stellen Sie sicher, dass diese Das Skript wird gestartet, wenn Ihre Seite (n) geladen wird. Es wird sich durch die Liste der Bilder arbeiten, sie laden und dann zum nächsten gehen, wenn jedes Bild fertig ist. (Der Aufruf setTimeout soll sicherstellen, dass der Handler "onload" nicht aufgerufen wird, während Sie sich noch in einem Handler befinden.)

Sie würden dies wahrscheinlich für viele "Schrauben und Muttern" tun wollen. Bilder für Ihre gesamte Website - mit anderen Worten, jede Seite würde versuchen, Bilder für alles zu laden. Sobald sie im Cache sind, wird das natürlich nicht viel Zeit in Anspruch nehmen. Alternativ können Sie dieses Skript nur auf ein paar Seiten ausführen, wie "Login" -Bildschirmen und der Haupt "Home" -Seite.Natürlich, wenn Sie eine Website wie Flickr haben, dann möchten Sie wahrscheinlich nicht Ihre Bilder vorab laden :-)

Answer 7

Image preloaders sind schon seit Ewigkeiten. Sie müssen wirklich nicht, sie alle auf einmal laden, können Sie es bei Bedarf tun können, [wenn die Person, die nächste Seite lädt, können Sie das Bild holen, nachdem es]

Answer 8

Spriting

nur einen Blick wie Facebook tut es: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

Ein Bild, das SCHNELLER lädt als Serie von kleinen Bildern. Um das Symbol anzuzeigen, erstellen Sie einfach ein div mit festen Dimensionen und verschieben den Hintergrund darin. Ihr div funktioniert als Ansichtsfenster für das große Bild. Sie verwenden die Hintergrundposition, um zum entsprechenden Teil des Bildes zu gelangen. Alles andere ist verborgen.

Verschiedene Domains

Etwas, das Sie wahrscheinlich nicht wissen - Internet Explorer hat ein Limit von Verbindungen pro Server. Sie können darüber lesen: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 (here are exact numbers).

Was es bedeutet - wenn Benutzer IE7 verwendet, kann er NUR 4 (oder 2) Dateien gleichzeitig von Ihrem Server laden, unabhängig von der Geschwindigkeit seiner Internetverbindung.

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

Answer 9

• Meine Seite der Grundlasten (HTML + CSS + JS) (natürlich)
• Wie getan, beginne ich die imgs Laden (die URLs auf JS var gespeichert werden) aus mein Server, eine Zeit (oder etwas schneller), so kann ich eine Art Fortschrittsbalken machen. Die Bilder müssen nicht sofort angezeigt werden, ich brauche nur den Rückruf , wenn sie fertig sind.

Wenn Sie wollen so schnell wie möglich 10 Bilder zu laden, legen 10 <img> Tags auf der Seite, eine für jedes Bild. Verwenden Sie Javascript, um alle außer dem aktuell angezeigten Bild zu verbergen; Fügen Sie next/back-Links hinzu, die JS verwenden, um das aktuelle Bild auszublenden und das nächste anzuzeigen. Viele Browser haben bereits eine Form von Fortschrittsbalken, und indem sie Dinge mit normalem altem HTML machen, wird es richtig funktionieren.

Sie versuchen, all diese Funktionalität mit Javascript ohne Grund neu zu erfinden. Du wirst es nicht besser machen als den Browser.

Alles, was gesagt wird, ist dies wahrscheinlich eine schlechte Idee. Sie können 15 MB Comic-Seiten in das Browser-Fenster laden, um den Benutzer nach dem Lesen der ersten Seite zu verlassen. Anstatt zu versuchen, alle Bilder vorab zu laden, sollten Sie JS verwenden, um immer die nächste Seite (oder zwei) vorgeladen zu halten, nicht die ganze Sache.