XMLHttpRequestEventTarget: loadstart — Ereignis · JavaScript-Referenz

Signatur

xhr.addEventListener("loadstart", handler) / xhr.onloadstart = handler

Beschreibung

Das Ereignis loadstart gehört zum Interface XMLHttpRequestEventTarget und wird damit sowohl auf einem XMLHttpRequest-Objekt als auch auf dessen XMLHttpRequestUpload-Objekt (xhr.upload) ausgelöst. Es ist das erste Fortschrittsereignis einer Anfrage und tritt direkt nach dem Aufruf von send() auf, noch bevor Daten gesendet oder empfangen wurden.

Der Handler erhält ein ProgressEvent mit den Eigenschaften loaded (anfangs 0), total und lengthComputable. Gut geeignet ist loadstart, um einen Ladeindikator einzublenden, Schaltflächen zu deaktivieren oder die Startzeit einer Übertragung zu messen.

Die typische Ereignisreihenfolge ist: loadstart → progress (mehrmals) → load bzw. error, abort oder timeout → loadend. Registrieren kannst du den Handler per addEventListener("loadstart", …) oder über die Eigenschaft onloadstart.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"loadstart"`.
$handler Pflicht	(event: ProgressEvent) => void		Callback, der ein `ProgressEvent` mit `loaded`, `total` und `lengthComputable` erhält.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt undefined zurück. Der Handler bekommt ein ProgressEvent übergeben.

Beispiele

Ladeindikator per addEventListener anzeigen

const spinner = document.querySelector('#spinner');
const xhr = new XMLHttpRequest();

xhr.addEventListener('loadstart', (event) => {
  spinner.hidden = false;
  console.log(`loadstart – geladen: ${event.loaded}`);
});

xhr.addEventListener('loadend', () => {
  spinner.hidden = true;
  console.log('loadend');
});

xhr.open('GET', '/api/users');
xhr.send();

loadstart – geladen: 0 loadend

Ereignisreihenfolge mit onloadstart protokollieren

const xhr = new XMLHttpRequest();
const log = (e) => console.log(`${e.type}: ${e.loaded} Bytes`);

xhr.onloadstart = log;
xhr.onprogress = log;
xhr.onload = log;
xhr.onloadend = log;

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

loadstart: 0 Bytes progress: 83 Bytes load: 83 Bytes loadend: 83 Bytes

Upload-Start erkennen und Handler wieder entfernen

const input = document.querySelector('input[type=file]');

input.addEventListener('change', () => {
  const xhr = new XMLHttpRequest();
  const startedAt = { time: 0 };

  const onUploadStart = () => {
    startedAt.time = performance.now();
    console.log('Upload gestartet');
    // Handler nur einmal benötigt
    xhr.upload.removeEventListener('loadstart', onUploadStart);
  };

  // Upload-Listener VOR send() registrieren
  xhr.upload.addEventListener('loadstart', onUploadStart);
  xhr.upload.addEventListener('loadend', () => {
    const ms = Math.round(performance.now() - startedAt.time);
    console.log(`Upload fertig nach ${ms} ms`);
  });

  const form = new FormData();
  form.append('datei', input.files[0]);
  xhr.open('POST', '/upload');
  xhr.send(form);
});

Upload gestartet Upload fertig nach 412 ms

// Wichtig · Fallstricke

Handler müssen vor send() registriert werden, sonst wird loadstart verpasst. Bei xhr.upload ist das besonders wichtig: Werden Upload-Listener erst nach send() hinzugefügt, lösen manche Browser keine Upload-Ereignisse aus.
Upload-Listener auf xhr.upload machen eine Cross-Origin-Anfrage „nicht einfach“ und lösen einen CORS-Preflight (OPTIONS) aus.
Bei GET- oder HEAD-Anfragen ohne Body wird auf xhr.upload kein loadstart ausgelöst.
Bei synchronen Anfragen (open(…, false)) werden keine Fortschrittsereignisse ausgelöst. Synchrones XHR ist im Hauptthread ohnehin veraltet.
loadstart heißt nicht, dass die Verbindung erfolgreich war. Fehler zeigen erst error, timeout oder abort an.
Für neuen Code ist oft fetch() vorzuziehen. Das hat aber keine gleichwertigen Upload-Fortschrittsereignisse, dafür bleibt XHR sinnvoll.
Browser-Kompatibilität: wird von allen modernen Browsern unterstützt (ab IE 10).

Siehe auch

progress load loadend error abort ProgressEvent XMLHttpRequest.upload XMLHttpRequest