Optimiertes Nachladen von Bildern

Im vorherigen Artikel habe ich die elementaren Dinge zum Nachladen von Bilder und dynamischen Anzeigen in einer Webseite vorgestellt. Hier möchte ich noch ein paar Optimierungen dazu demonstrieren

Im vorherigen Beispiel habe ich die Adresse der Bilder per Javascript geändert. Dadurch wird das Bild aber nicht vorgeladen und der Benutzer sieht im Browser den Ladevorgang des Bildes. Da aber vorab schon eine animierte Ladegrafik angezeigt wird, ist das nur suboptimal. Besser wäre es, wenn die Bilder erst vollständig im Hintergrund geladen werden und danach im Browser angezeigt werden. Somit ist auch ein fließender Übergang zwischen zwei Bildern möglich. jQuery bietet mit der load-Methode hier alles notwendige.

Die verbesserte Lademethode sieht dann wie folgt aus.

$(document).ready(function () {
  $('img[data-role="cover"][data-asin]').each(function () {
    var pic = this;
    var asin = $(this).attr("data-asin");

    $('div.coverPic[data-id="' + asin + '"]').hide();
    $('div.loaderPic[data-id="' + asin + '"]').show();

    var url = "/Misc/Thumbnail?asin=" + asin;
    
    $("<img />").attr("src", url).load(function () {
      $(pic).replaceWith($(this));
      $('div.loaderPic[data-id="' + asin + '"]').hide();
      $('div.coverPic[data-id="' + asin + '"]').fadeIn("slow");
    });
  })
});

Ich habe hier eine neue Quelle aufgenommen, welche für das Laden der Bilder verantwortlich ist. Diese wird in der Variable url gespeichert. Da ich in mittels ASP.NET MVC programmiere, ist das eine Controlleraktion im Controller Misc. Das kann natürlich verändert werden.
Änderungen am HTML-Code gab es nicht. Das könnt ihr im anderen Artikel nachlesen.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s