HTML onabort Attribute

Introduction

The onabort attribute is an inline event handler that runs JavaScript when a media resource stops loading before it finishes. It applies to elements like <img>, <audio>, <video>, and <track>. The abort event fires when loading is canceled—for example when script clears src, assigns a new URL mid-load, or the user navigates away. It is not the same as a failed load: a broken image URL triggers onerror, not onabort.

What You’ll Learn

Purpose of onabort Attribute

The primary purpose of onabort is to respond when a media download is interrupted before completion. Single-page apps that swap image galleries may cancel in-flight requests. Lazy-loading libraries might abort loads for off-screen images. You can log canceled requests, release memory, or show a placeholder when a load does not finish.

The old reference incorrectly suggested that a missing image or “failed to load” triggers onabort. That is onerror. onabort means the browser stopped an in-progress fetch—not that the server returned 404 or the format was invalid.

📝 Syntax

Set onabort to a JavaScript statement or function call on a media element:

<img

  src="photo.jpg"

  alt="Profile photo"

  onabort="handleAbort()">



<video src="clip.mp4" onabort="logCanceled()"></video>



<script>

  function handleAbort() {

    console.log("Image load was canceled.");

  }

</script>

Syntax Rules

• Value is JavaScript code executed when the abort event fires.
• Applies to <img>, <audio>, <video>, and <track>.
• Fires only when loading is canceled mid-request, not on successful load or error.
• JavaScript property: element.onabort = function() { … }.
• Modern alternative: element.addEventListener("abort", handler).
• Do not confuse with AbortController fetch API—related concept, different API.

💎 Values

The onabort attribute accepts a string of JavaScript code:

• onabort="handleAbort()" — Call a named function.
• onabort="console.log('canceled')" — Inline statement.
• onabort="this.alt='Load canceled'" — Use this for the element.
• JavaScript: img.onabort = function (e) { … } assigns the same handler.

const img = document.getElementById("photo");

img.addEventListener("abort", () => {

  console.log("Load canceled");

});

// Cancel in-progress load
img.src = "";

Applicable Elements

onabort vs onerror vs onload

Examples Gallery

Inline onabort handler, addEventListener, and abort vs error comparison.

👀 Live Preview

Start loading an image, then cancel it to trigger abort:

Start load Cancel

Waiting…

Example — Inline onabort Handler

Call a function when loading is aborted:

inline-onabort.html

Copy

<img

  src="photo.jpg"

  alt="Example"

  onabort="handleImageAbort()">



<script>

  function handleImageAbort() {

    console.log("Image loading was canceled.");

  }

</script>

View Output Try It Yourself

📤 Output:

Cancel an in-progress load (clear src) to invoke handleImageAbort(). A wrong URL triggers onerror, not onabort.

How It Works

When the browser aborts fetching the image resource, it runs the JavaScript in onabort. The handler runs once per canceled load attempt.

Dynamic Values with JavaScript

Attach the handler with addEventListener or onabort property:

dynamic-onabort.html

Copy

<img id="dynamicImage" alt="Dynamic">



<script>

  const img = document.getElementById("dynamicImage");

  img.addEventListener("abort", () => {

    alert("Image loading aborted!");

  });

  img.src = "photo.jpg";

  img.src = ""; // cancel mid-load

</script>

View Output Try It Yourself

📤 Output:

Setting img.onabort = function() { … } works the same way. addEventListener is preferred for multiple handlers and cleaner separation.

How It Works

Assign the handler before or during loading. Clearing src or changing it while a fetch is active can fire abort on the previous request.

Example — onabort vs onerror

Do not use a broken URL to demo onabort—that fires error:

abort-vs-error.html

Copy

<!-- Cancel load → abort -->

img.addEventListener("abort", () => log("canceled"));

img.src = "photo.jpg";

img.src = "";



<!-- Bad URL → error -->

img.addEventListener("error", () => log("failed"));

img.src = "missing.jpg";

View Output Try It Yourself

📤 Output:

The old reference used wrong-image.jpg with onabort—that triggers error, not abort.

How It Works

abort, error, and load are separate events on media elements. Pick the handler that matches the situation you need to handle.

♿ Accessibility

• Provide alt text — On <img>, always set meaningful alt; abort handlers often swap to fallback content that must stay accessible.
• Announce load failures — If abort means content is unavailable, inform users visually and with ARIA live regions where appropriate.
• Do not rely on alerts — Replace alert() in demos with inline status messages in real apps.
• Video/audio captions — If track loading aborts, ensure captions still work or show a clear message.
• Keyboard users — Cancel actions triggered by buttons should be focusable and labeled.

💡 Best Practices