HTMLMediaElement: loadstart — Ereignis · JavaScript-Referenz

Signatur

mediaElement.addEventListener("loadstart", handler)

Beschreibung

Das Ereignis loadstart ist das erste Ereignis im Ladezyklus eines HTMLMediaElement (<audio> oder <video>). Es wird ausgelöst, wenn der Browser mit dem Ressourcenauswahl-Algorithmus fertig ist und mit dem Laden beginnt, etwa nach dem Setzen von src, nach dem Aufruf von load() oder beim ersten Parsen des Elements mit preload-Einstellung.

Die typische Reihenfolge ist: loadstart → durationchange → loadedmetadata → loadeddata → progress → canplay → canplaythrough. Deshalb eignet sich loadstart gut, um einen Ladeindikator (Spinner) einzublenden, die Oberfläche eines Players zurückzusetzen oder Ladezeiten zu messen.

Du kannst den Handler per addEventListener("loadstart", handler) oder über die Eigenschaft onloadstart registrieren. Das Ereignis ist ein einfaches Event, es steigt nicht auf (bubbles: false) und lässt sich nicht abbrechen. Zu diesem Zeitpunkt stehen noch keine Metadaten wie duration oder videoWidth bereit.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"loadstart"`.
$handler Pflicht	(event: Event) => void		Callback, das ein einfaches `Event` erhält. `event.target` ist das Medienelement.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`. Da das Ereignis nicht aufsteigt, brauchst du für Delegation `capture: true`.

Beispiele

Ladeindikator beim Start des Ladens einblenden

const video = document.querySelector('video');
const spinner = document.querySelector('.spinner');

video.addEventListener('loadstart', () => {
  spinner.hidden = false;
  console.log('Laden gestartet:', video.currentSrc || video.src);
});

video.addEventListener('canplay', () => {
  spinner.hidden = true;
});

video.src = '/media/intro.mp4';

Laden gestartet: https://example.com/media/intro.mp4

Ladezeit bis zur Abspielbereitschaft messen

const audio = new Audio();
let startTime = 0;

audio.onloadstart = () => {
  startTime = performance.now();
};

audio.oncanplaythrough = () => {
  const dauer = Math.round(performance.now() - startTime);
  console.log(`Abspielbereit nach ${dauer} ms`);
};

audio.src = '/media/podcast.mp3';
audio.preload = 'auto';

Abspielbereit nach 412 ms

Listener mit AbortController wieder entfernen

const video = document.querySelector('video');
const controller = new AbortController();

const onLoadStart = (event) => {
  console.log('loadstart für', event.target.id);
};

video.addEventListener('loadstart', onLoadStart, { signal: controller.signal });

// Später, z. B. beim Zerstören der Player-Komponente:
controller.abort();
// Alternativ: video.removeEventListener('loadstart', onLoadStart);
// oder bei on-Property: video.onloadstart = null;

loadstart für player

Delegation per Capture für mehrere Player

// loadstart steigt nicht auf – daher capture: true
document.addEventListener('loadstart', (event) => {
  if (event.target instanceof HTMLMediaElement) {
    event.target.closest('.player')?.classList.add('is-loading');
  }
}, true);

// Wichtig · Fallstricke

Kein Bubbling: loadstart steigt nicht auf. Ein Listener auf einem übergeordneten Element greift nur mit capture: true.
Listener früh registrieren: Bei Elementen im HTML mit src kann das Ereignis schon feuern, bevor dein Skript läuft. Registriere den Listener vor dem Setzen von src oder prüfe zusätzlich networkState bzw. readyState.
Mehrfaches Auslösen: Jeder Wechsel von src und jeder Aufruf von load() löst erneut loadstart aus. Zuvor kann emptied oder abort kommen.
Keine Metadaten: duration ist hier noch NaN, videoWidth ist 0. Für diese Werte brauchst du loadedmetadata.
preload="none": Einige Browser (vor allem mobile Safari) laden erst bei einer Nutzeraktion. Dann kommt loadstart möglicherweise erst beim Abspielen.
Nicht verwechseln mit XMLHttpRequest/FileReader: Dort heißt das Ereignis loadstart ebenfalls, ist aber ein ProgressEvent.
Kompatibilität: Das Ereignis wird von allen modernen Browsern unterstützt.

Siehe auch

HTMLMediaElement loadedmetadata loadeddata progress canplay emptied HTMLMediaElement.prototype.load() EventTarget.prototype.addEventListener()