lange Ladezeiten bei Bildern (eingebunden mittels JavaScript)

Question

Ich habe eine Zuordnungsaufgabe erstellt, in der ich mittels JavaScript in der Pause vor jedem Stimulus ein Bild zufällig aus 4 möglichen Bildern auswähle und zeige. Jedes dieser Bilder soll immer nur für 250 ms gezeigt werden. Das Problem ist, dass die Bilder in dieser Zeit nicht vollständig bzw. in manchen Durchgängen gar nicht geladen werden. Wenn ich die Anzeigezeit auf 500 ms erhöhe, schafft SoSciSurvey fast immer das Bild gerade so vollständig zu laden.

In einer anderen Zuordnungsaufgabe zeige ich ebenfalls Bilder von gleicher Dateigröße und Dateiformat (.png) und da gibt es gar keine Verzögerung beim Laden. Allerdings werden diese Bilder nicht mittels JavaScript eingebunden.

Gibt es dafür eine Lösung?

Answer 1

Wenn Sie die Bilder erst in der Pause auswählen, dann beginnt der Browser erst in diesem Moment mit dem Laden. Und je nach Bildgröße kann das schonmal kurz dauern.

Die einfachste Lösung ist das sog. Preloading. Damit lassen Sie die Bilder im Hintergrund z.B. beim Laden der Seite schon übermitteln.

<script>
function Preload(imageURL) {
  var loader = new Image();
  loader.src = imageURL;
}
new Preload("hund.png");
new Preload("katze.png");
new Preload("maus.png");
</script>

Wenn man sich dann wirklich im Bereich < 100 ms bewegen will, müsste man auch noch die Rendering-Zeit betrachten. Das wird dann aber ein wenig komplizierter. Das Modul "implizite Methoden" von SoSci Survey zeigt die Bilder z.B. zu Beginn mit 90% Transparenz kurz an, damit der Browser schonmal alles skalieren kann, und blendet sie dann aus bis sie benötigt werden.

Comments

Vielen herzlichen Dank! So werden meine Bilder tatsächlich schneller geladen, obwohl trotzdem mit einer Verzögerung.

Wie könnte ich Ihren Beispiel (dass Bilder mit 90% Transparenz kurzangezeigt werden) umsetzen? Soweit ich verstehe, gehört die Zuordnungsaufgabe zum Modul "implizite Methoden".

---

Das erfordert einiges Basteln mittels JavaScript. Eine triviale, immer funktionierende Lösung dafür gibt es nicht. Im Idealfall würden Sie die Bild-Elemente <img> schon von vornherein auf der Seite haben, und mittels JavaScript evtl. die Platzierung im DOM so ändern, dass sie sichtbar sind, während der Zeit die style.opacity-Eigenschaft anpassen und sie danach wieder an die passende Stelle schieben.

---

Vielen Dank für Ihre Hilfe!