PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

Bilder mit JavaScript asynchron laden, um lange Ladezeiten zu verhindern

| 5 Kommentare

Manchmal nimmt das Laden einer Seite kein Ende. Der Ladebalken will einfach nicht die 100% erreichen. Woran liegt’s? – Meistens an externen Services, wie Google Analytics oder Verzeichnissen wie Bloggerei und Blogoscoop, die ein Bild (Publicon) einbinden, dass gerade nicht verfügbar ist oder ewig lange braucht, bis es geladen ist. Doch wie kann man diese Angelegenheit umgehen?

Google hat das Problem bereits erkannt und bietet seit einiger Zeit die Möglichkeit, Google Analytics asynchron zu laden.

Mit Bloggerei & Co hat man es nicht so leicht. Ich habe Einiges ausprobiert, bin jedoch nicht zu einem überzeugenden Ergebnis gekommen. Doch fangen wir von vorne an:


Möglichkeit 1: Nachträglich einfügen

Die einfachste Variante wäre, das Bild (oder den Code des Anbieters) gar nicht im HTML-Dokument zu platzieren, sondern erst nachträglich mit JavaScript einzufügen. Der Ladebalken des Browsers wäre verschwunden bevor das Bild überhaupt beginnt zu laden.

Jedoch funktioniert das schon mal nicht mit Bloggerei. Denn dort schaut regelmäßig ein Bot vorbei, der überprüft ob der Code richtig eingebunden ist. Beim Bot wird kein JavaScript ausgeführt, sodass dieser keinen Code zu Gesicht bekommt. Bringt also nichts…

Möglichkeit 2: Verstecken & nachträglich anzeigen

Für den zweiten Versuch habe ich mir eine kleine „Testumgebung“ geschaffen. Zunächst benötigte ich ein Bild, das immer eine gewisse Zeit benötigt um geladen zu werden. Das habe ich ganz einfach in PHP mit einem Timeout gelöst (img.php):

1
2
3
4
5
6
7
8
9
10
<?php
sleep(3);
 
$file = 'img.jpg';
$image = imagecreatefromjpeg($file);
 
header("Content-type: image/jpeg");
 
imagejpeg($image);
imagedestroy($image);

Dieses Bild wird nun in einer HTML-Datei eingebunden:

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Speedtest #1</title>
    </head>
 
    <body>
        <img alt="Speedtest" src="img/img.php" />
    </body>
</html>

Würden wir die HTML-Datei jetzt aufrufen, würde es etwa drei Sekunden dauern bis der Ladebalken im Browser verschwindet. Deshalb war meine Idee, das Bild mittels CSS zu verstecken, damit der Browser es nicht beim Rendern der Seite lädt. Danach (wenn der Ladebalken verschwunden ist) kann man es schließlich mit JavaScript ganz einfach wieder sichtbar machen.

Die HTML-Datei habe ich also wie folgt geändert:

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Speedtest #2</title>
    </head>
 
    <body onload="document.getElementsByTagName('img')[0].style.display = 'inline';">
        <img alt="Speedtest" src="img/img.php" style="display:none;" />
    </body>
</html>

Diese Lösung wäre zu schön gewesen. Leider wird das Bild trotz des CSS-Befehls „display: none;“ bereits beim Rendern der Seite geladen. (Das Gleiche gilt für „visibility: hidden;“.)

Diese Möglichkeit kommt also ebenfalls nicht in Frage.

Möglichkeit 3: Platzhalter & nachträglich laden

Vorab kann ich sagen: Diese Möglichkeit funktioniert zwar, ist aber genau wie die erste Variante nicht für Bloggerei und ähnliche Dienste einsetzbar, da hier der Code verändert werden muss.

Anstelle des eigentlichen Bildes setzen wir einen Platzhalter ein. Zum Beispiel ein 1×1 Pixel großes Bild, dass auf unserem Server liegt und natürlich verfügbar ist. Nachträglich ändern wir den src-Parameter des img-Elements.

Der Code sähe dann so aus:

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Speedtest #3</title>
    </head>
 
    <body onload="document.getElementsByTagName('img')[0].src = 'img/img.php'">
        <img alt="Speedtest" src="img/blank.jpg" />
    </body>
</html>

Wie bereits erwähnt, funktioniert diese Variante einwandfrei. Der Ladebalken ist verschwunden, obwohl das eigentliche Bild noch nicht geladen ist. Jedoch würden wir den Code des Anbieters verändern und das Ziel ist somit immer noch nicht erreicht.

Fazit

Es gibt zwar neben der vorgestellten Möglichkeit noch andere Varianten Bilder asynchron zu laden – um letztendlich den Ladebalken zu entfernen, darf das Bild jedoch noch nicht im HTML-Dokument vorhanden sein. Da dies leider von Anbietern wie Bloggerei gefordert wird, muss man sich wohl mit den längeren Ladezeiten bei Server-Problemen seitens des Anbieters zurechtfinden.

Falls mir doch jemand eine Lösung für das Problem nennen kann, wäre ich sehr dankbar!

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!
  • Bernd

    Okayokay, ist schon was her – ich seh‘ es ein… 😉

    Ich wollte Dir nur einen Tip zu Deiner 2ten Variante geben:
    Das funktioniert, wenn Du nicht das Bild mit dem Style-Tag „display:none;“ versteckst, sondern einen „div“-Tag drumherum setzt und diesen dann versteckst…

    Grüße
    Bernd

  • Vielen Dank,
    werde ich die Tage mal ausprobieren…

  • Ina

    Hast du es mal ausprobiert, ob es mit dem extra „div“-Tag funktioniert?

  • Die Variante mit dem Extra-Tag drumherum hat in meinen Tests leider nicht funktioniert…

  • martin

    wie wäre es mit einer mischung?
    content für den bot bzw für einen regulären browser.

    den bot kann man mit sicherheit irgendwie identifizieren mittels ip und user-agent oder?