Dynamisches Laden von Bildern

Webseiten werden immer dynamischer. Und das soll bei komplexeren Inhalten wie Bildern und Videos natürlich nicht Halt machen. In einer Webseite habe ich nun ein dynamischen Nachladen von eventuell bestehenden Bildern aus Amazon (via Amazon Webservice) integriert. 

Um die notwendigen Informationen in der Seite zur Verfügung zu stellen, verwende ich die data-Attribute. Diese füttere ich dann mit den Informationen im Backend. Beim aktuellen Beispiel wird die ASIN eingebettet. Sollte mal keine ASIN vorhanden sein, soll aber auch ein Bild angezeigt werden. Somit wird die Seite erstmal mit einem Platzhalterbild ausgeliefert. Wird dann der Ladeprozess angestoßen, wechselt die Anzeige zu einem Ladebild. Der Seitenaufbau für das Element ist damit wie folgt.

"> ' alt="lade Bild" />
"> ' data-role="cover" alt="Cover" />
</div>

Im ersten div mit der Klasse loaderPic ist das animierte Ladebild enthalten. Dieses div ist zu Beginn ausgeblendet. Im zweiten div ist das Platzhalterbild enthalten, welches angezeigt wird, wenn keine ASIN vorhanden ist, oder ein Fehler beim Laden auftritt.

Die eigentliche Ladelogik ist mittels jQuery implementiert. Anhand der Selektoren in jQuery kann man die Elemente sehr gut filtern. Für alle Elemente mit dem Attribut data-role=“cover“, welche auch ein Attribut data-asin enthalten, wird die Ladefunktion ausgeführt.
In der Funktion wird zu Beginn das Platzhalterbild gegen ein animiertes Ladebild ausgetauscht. Danach wird eine Aktion im Backend per jQuery-Get aufgerufen, welche die URL des Bildes liefert. Wird das Bild erfolgreich geliefert und ist auch ein Wert enthalten, so wird das Ladebild gegen das Bild aus dem Backend getauscht.


    $(document).ready(function () {
        $('img[data-role="cover"][data-asin]').each(function () {
            //toggle loader/placeholder
            var asin = $(this).attr("data-asin");
            $('div.coverPic[data-id="' + asin + '"]').hide();
            $('div.loaderPic[data-id="' + asin + '"]').show();
            //get image and switch
            $.get("", { asin: asin }, 
              function (data) {
                $('div.loaderPic[data-id="' + asin + '"]').hide();
                $('div.coverPic[data-id="' + asin + '"]').show();

                if (data != "") 
                    $(pic).attr("src", data);
                else
                    $(pic).attr("src", '/Content/images/empty.png');
            });
        })        
    });

Wie man sieht, ist sowas mit jQuery und ein paar data-Attributen keine Hexerei. Es gibt bestimmt noch viele Einsatzgebiete, für die sich ein solcher Ladealgorithmus verwenden lässt. Dann lasst eurer Kreativität freien Lauf.

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