HTML onloadstart Attribute

Introduction

The onloadstart attribute is an inline event handler for the loadstart event on media elements — <audio> and <video>. It runs when the browser begins fetching media data — the first event in the media loading timeline. Use it to show a loading spinner, reset progress UI, or log that buffering has started. It is not the same as body onload (page ready) or img onload (image finished). Images do not fire loadstart in the HTML media event model.

What You’ll Learn

Purpose of onloadstart Attribute

The primary purpose of onloadstart is to react at the very start of media loading — before metadata, frame data, or playback readiness. That is the right moment to display “Loading…”, disable a play button, or reset a progress bar when the user picks a new track or you change src.

In the loading sequence, loadstart comes first, then progress, loadedmetadata, loadeddata, and canplay. Pair onloadstart with onloadeddata or oncanplay to hide the spinner when enough data arrives.

📝 Syntax

Set onloadstart on an audio or video element:

<audio controls onloadstart="showLoading(this)">
  <source src="track.mp3" type="audio/mpeg">
</audio>

<video controls onloadstart="handleLoadStart(this)">
  <source src="clip.mp4" type="video/mp4">
</video>

Syntax Rules

• Value is JavaScript executed when the loadstart event fires.
• Works on <audio> and <video> only.
• Fires when the browser starts looking for / fetching media data.
• First event in the standard media loading timeline.
• Pass this from inline handler or use event.target in listeners.
• Modern alternative: media.addEventListener("loadstart", handler).
• Also fires again after element.load() or when src changes.

💎 Values

The onloadstart attribute accepts a string of JavaScript code:

• onloadstart="showLoading(this)" — Pass the media element.
• onloadstart="handleLoadStart(event)" — Use event.target inside the function.
• JavaScript: video.onloadstart = () => { … } or property assignment on the element.

player.addEventListener("loadstart", () => {
  document.getElementById("status").textContent = "Loading media…";
  document.getElementById("status").className = "loading";
});

player.addEventListener("canplay", () => {
  document.getElementById("status").textContent = "Ready to play";
  document.getElementById("status").className = "ready";
});

Applicable Elements

onloadstart vs onloadedmetadata vs onload

Examples Gallery

Show a loading message, attach with addEventListener, and pair loadstart with canplay.

<audio controls onloadstart="handleLoadStart(this)">
  <source src="track.mp3" type="audio/mpeg">
</audio>
<p id="status"></p>

<script>
  function handleLoadStart(media) {
    document.getElementById("status").textContent =
      "Loading: " + media.currentSrc;
  }
</script>

<audio id="myAudio" controls>
  <source src="track.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById("myAudio").addEventListener("loadstart", function () {
    document.getElementById("log").textContent = "Media loading has started";
  });
</script>

const player = document.getElementById("player");
const status = document.getElementById("status");

player.addEventListener("loadstart", () => {
  status.textContent = "Loading…";
  status.className = "loading";
});

player.addEventListener("canplay", () => {
  status.textContent = "Ready to play";
  status.className = "ready";
});

♿ Accessibility

• Announce loading state — Use visible text or aria-live="polite" on a status region.
• Do not block controls — Keep native controls usable unless you provide full keyboard-accessible replacements.
• Pair with error handling — Use onerror so failed loads are not stuck on “Loading…” forever.
• Reduce motion — Respect prefers-reduced-motion for spinner animations.
• Captions for video — Add <track kind="captions"> for accessible video content.

💡 Best Practices