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

Hinweis: JPG und PNG sind bereits komprimiert.

Sie können versuchen, eine "CSS-Sprites"-Technik zu verwenden. Im Grunde genommen verwenden Sie Ihr bevorzugtes Bildbearbeitungsprogramm, um alle Bilder zu einem einzigen Bild zusammenzufügen. Die Übertragung ist schneller, da der Aufwand für die Kodierung des Bildes und das Senden des Bildes pro Datei entfällt. Auf der Client-Seite verwenden Sie CSS, um nur den Teil des Gesamtbildes auszuwählen, der an einer bestimmten Stelle verwendet wird.

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

UND/ODER

Sie können "Lazy Loading" verwenden, um Bilder nur zu laden, wenn sie angezeigt werden.
http://www.appelsiini.net/projects/lazyload

Answer 2

Bild-Preloader gibt es schon seit langem. Sie müssen sie wirklich nicht alle auf einmal laden, Sie können es bei Bedarf tun [wenn die Person die nächste Seite lädt, können Sie das Bild danach abrufen].

Answer 3

Hier ist etwas, das Sie ausprobieren können und das ich zufälligerweise gerade programmiert habe:

(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();
 })();

Legen Sie alle Ihre Bildnamen (oder die, die Sie vorladen wollen) in das Array und stellen Sie sicher, dass das Skript startet, wenn Ihre Seite(n) zu laden beginnen. Es wird sich durch die Liste der Bilder arbeiten, sie laden und dann zum nächsten weitergehen, wenn jedes Bild fertig ist. (Das setTimeout Aufruf soll sicherstellen, dass der "onload"-Handler nicht aufgerufen wird, während man sich noch innerhalb eines Handlers befindet).

Wahrscheinlich möchten Sie dies für viele der "wichtigsten" Bilder Ihrer gesamten Website tun - mit anderen Worten, jede Seite würde versuchen, Bilder für alles zu laden. Sobald die Bilder im Cache sind, wird dies natürlich nicht mehr viel Zeit in Anspruch nehmen. Alternativ können Sie dieses Skript auch nur auf einigen wenigen Seiten ausführen, z. B. auf den Anmeldebildschirmen und der Hauptseite "Home". Wenn Sie eine Website wie Flickr haben, dann möchten Sie wahrscheinlich keine Bilder vorladen. alle Ihre Bilder :-)

Answer 4

• Meine Seite lädt die Basis (HTML+CSS+JS) (natürlich)
• Wie getan, beginne ich das Laden der imgs (die URLs sind auf JS var gespeichert) von meinem Server, einer nach dem anderen (oder eine schnellere Methode), so dass ich eine Art Fortschrittsbalken machen kann.
• Die Bilder müssen nicht sofort angezeigt werden, ich brauche nur den Rückruf wenn sie fertig sind.

Wenn Sie 10 Bilder so schnell wie möglich laden wollen, platzieren Sie 10 <img> Tags auf der Seite, einen für jedes Bild. Verwenden Sie Javascript, um alle Bilder bis auf das aktuell angezeigte auszublenden; fügen Sie Weiter/Zurück-Links hinzu, die JS verwenden, um das aktuelle Bild auszublenden und das nächste anzuzeigen. Viele Browser verfügen bereits über eine Art Fortschrittsbalken, und wenn Sie mit normalem, altem HTML arbeiten, wird dieser korrekt funktionieren.

Sie versuchen, all diese Funktionen mit Javascript neu zu erfinden, und das ohne guten Grund. Sie werden es nicht besser machen als der Browser.

Abgesehen davon ist dies wahrscheinlich eine schlechte Idee. Sie könnten 15 MB an Comicseiten in das Browserfenster laden, nur damit der Benutzer nach dem Lesen der ersten Seite wieder geht. Anstatt zu versuchen, alle Bilder vorzuladen, sollten Sie JS verwenden, um immer die nächste Seite (oder zwei) vorzuladen, nicht die ganze Sache.