So liefern Sie Feedback beim Laden von Miniaturansichten und steuern Sie die Lastreihenfolge

Question

Ich erstelle eine Website mit rund 250-300 Miniaturansichten auf einer einzigen Seite, die in 5 verschiedenen Divs enthalten sind, die jeweils horizontal gescrollt werden können.
Während der Ladephase muss ich jedoch in der Lage sein, auf ein Miniaturbild zu klicken und das Bild mit voller Aufleuchtung in der Lightbox zu laden.

Ich habe mir Jason Buntings angesehen und antwortet in Wie zeige ich den Ladestatus mit Voroader und mehreren Bildern an? Was mich halb so bringt: Es funktioniert in IE, aber nicht in FF, wo es das Lightbox-Bild erst lädt, wenn alle Miniaturansichten geladen sind.

Also habe ich meinen eigenen Code auf demselben Konzept aufgebaut: Es funktioniert aber instabil (zufällig hängt) und verwendet jede Menge Speicher:

function doLoadThumbnails(queue) {
  if (!queue.isEmpty()) {
    if (connManager.AcquireConnection()) {
        var imageLink = queue.dequeue();
        var loader = new Image();
        loader.onload = function() {
            imageLink.firstChild.src = imageLink.href;
            connManager.ReleaseConnection();
        }
        loader.src = imageLink.href;

        doLoadThumbnails(queue);
    } else {
        connManager.getEventObject().bind('connReleased', function(e) {
            window.setTimeout(function() {
                doLoadThumbnails(queue);
            }, 50);
            connManager.getEventObject().unbind('connReleased', arguments.callee);
        });
    }
  }
}

ConnectionManager sieht so aus:

function ConnectionManager() {
  var eventObject = $('<span id="ConnectionManager"></span>').appendTo("body");
  var activeConnections = 0;
  var maxConnections = 5;

  this.getEventObject = function() {
    return eventObject;
  }

  this.isConnectionAvailable = function() {
    return activeConnections < maxConnections;
  }

  this.AcquireConnection = function() {
    if (activeConnections < maxConnections) {
        activeConnections++;
        return true;
    } else {
        return false;
    }
  }

  this.ReleaseConnection = function() {
    activeConnections--;
    eventObject.trigger('connReleased');
  }
}

Ist das ein im Grunde genommen Soundkonzept oder bin ich weit weg? Kennen Sie eine bessere/einfachere Methode, um dies zu tun?

Answer 1

Ist dies eine günstige Möglichkeit, dies zu tun, oder gibt es bessere und schnellere Möglichkeiten?

Eine der größten Geschwindigkeitsverbesserungen, die Sie erhalten, ist die Verringerung der Gesamtzahl der Anfragen, die Sie stellen.

Wenn Sie Zugriff auf eine Bildverarbeitungsbibliothek auf dem Server haben, können Sie in Betracht ziehen, ein Skript zu schreiben, um alle Miniaturansichten für jedes DIV in ein großes Kontaktblattbild zu machen.

Sie können eine Bildkarte verwenden, um herauszufinden, welches Bild mit voller Aufläufe angezeigt werden soll, wenn der Benutzer auf das Kontaktblatt klickt (oder Sie können möglicherweise eine CSS-Sprite-Technik verwenden, um das richtige Vorschaubild als Hintergrund auf Ihrem Link zum Vollauflauf zu rendern Bild, wenn Sie den Rand des Miniaturbilds auf Mausover hervorheben möchten).

Hth:^)

Answer 2

Ein Vorschlag: Ich würde maximale Verbindungen zu 2 "standardmäßig" "standardmäßig" - es ist die am meisten erlaubte in der HTTP/1.1 -Spezifikation zu derselben Domäne - also laden die meisten Browser nicht mehr als 2 Bilder gleichzeitig.