p5.js loadImage() ↔ Browser Image Loading: How to Gracefully Cancel or Time‑Out Asynchronous Loads?

The short answer

You cannot truly cancel an in-flight loadImage() call, because p5.js loads images through a browser HTMLImageElement, and the web platform offers no API to abort an image request once it starts. What you can do reliably is (1) stop your sketch from reacting to a late result, and (2) stop waiting after a deadline. If you need the network request itself to actually abort, bypass loadImage() and use fetch() with an AbortController.

What is confirmed vs. what is a workaround

Confirmed behavior: loadImage(path, success, error) creates an Image, sets handlers, and assigns src. The browser then owns the request. There is no spec-level cancel for that request, and p5.js exposes no abort handle.

Workaround, not guaranteed: setting img.src = '' (or a tiny data URI) causes some browsers to drop the fetch, but this varies by engine and version. Treat it as a hint, not a cancellation mechanism — verify in DevTools' Network tab before relying on it.

Pattern 1: Ignore late results with a token

If the goal is "don't let a stale image clobber the current one," a monotonically increasing id is enough:

let loadToken = 0;
let currentImg = null;

function requestImage(url) {
  const myToken = ++loadToken;
  loadImage(url,
    img => { if (myToken === loadToken) currentImg = img; },
    err => { if (myToken === loadToken) console.warn('failed', err); }
  );
}

Any load that finishes after a newer request started is silently discarded. Neither callback fires user-visible side effects for stale loads, which answers the "cancel without triggering handlers" concern in practice.

Pattern 2: Enforce a timeout with Promise.race

function loadImageWithTimeout(url, ms) {
  const load = new Promise((resolve, reject) =>
    loadImage(url, resolve, reject));
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('timeout')), ms));
  return Promise.race([load, timeout]);
}

Important caveat: the timeout only stops your code from waiting. The underlying request continues in the background and the success callback may still fire later — combine this with the token pattern if that matters.

Pattern 3: Real cancellation via fetch + AbortController

When bytes on the wire actually matter (slow connections, large assets, rapid switching), load the bytes yourself:

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 5000);

const res = await fetch(url, { signal: controller.signal });
const blob = await res.blob();
clearTimeout(timer);
const objectUrl = URL.createObjectURL(blob);
loadImage(objectUrl, img => {
  // use img, then release memory when replaced:
  // URL.revokeObjectURL(objectUrl);
});

This is the most browser-compatible way to both time out and cancel: AbortController is supported in all modern browsers, and the request visibly aborts in the Network panel. Remember to revoke object URLs to avoid leaking memory.

Should p5.js add a native abort API?

Yes, but the honest design is a fetch-based loader under the hood, because a cancellable promise wrapping HTMLImageElement would still be cosmetic — it could detach handlers but not stop the download. A native API would also need to define behavior for preload(), where a hung load currently stalls sketch startup; moving optional assets into setup() with manual loading already avoids that stall today.

Verify before shipping

• Load a large image through a throttled connection, trigger your timeout, and check the Network tab: does the request abort or run to completion?
• Confirm the loadImage error-callback signature against the reference for the p5.js version you actually ship — it has changed across releases.