loadImage hangs indefinitely without timeout or cancellation support

Direct Answer

p5.js loadImage, loadJSON, and related async loaders do not expose a timeout parameter or cancellation mechanism. They delegate to the browser's fetch without an AbortSignal, so a stalled request keeps preload() waiting until the browser's native network timeout fires, which can exceed 30 seconds or never fire. setup() will not run until preload() settles.

Confirmed Behavior

• p5.js loader signatures accept path, successCallback, and failureCallback only; there is no timeout or signal option in the 1.x release line.
• preload() awaits every load promise, so one hung request blocks the sketch indefinitely.
• Repeating the same loader starts a new fetch while the previous request may still complete later and invoke its callback.
• Promise.race with a manual timer rejects the wrapper but does not abort the underlying fetch; late responses can still reach p5.js callbacks unless guarded.

Recommended Workaround

Wrap each p5.js load call in a promise that races against a timer. Use a closure-scoped flag so a late success or error callback after timeout is ignored.

function loadWithTimeout(loaderFn, url, timeoutMs = 8000) {
  let done = false;
  const timer = setTimeout(() => { done = true; }, timeoutMs);

  return new Promise((resolve, reject) => {
    loaderFn(url,
      (result) => {
        if (done) return;
        done = true;
        clearTimeout(timer);
        resolve(result);
      },
      (error) => {
        if (done) return;
        done = true;
        clearTimeout(timer);
        reject(error);
      }
    );
  });
}

Use it inside preload() so one stalled asset does not block setup() forever:

async function preload() {
  try {
    sprite = await loadWithTimeout(loadImage, 'assets/sprite.png', 5000);
  } catch (e) {
    console.warn('Sprite load failed or timed out', e);
    sprite = createImage(64, 64);
  }
  try {
    config = await loadWithTimeout(loadJSON, 'api/config.json', 3000);
  } catch (e) {
    throw e;
  }
}

preload() Behavior

When a load times out, preload() can proceed with a placeholder for non-critical assets or re-throw to halt the sketch. There is no dedicated error hook in preload(); wrap each awaited call in try/catch.

Verification

1. Open browser devtools Network tab.
2. Run a sketch that calls loadImage('https://slow-or-unreachable.example.com/image.png') inside preload().
3. Confirm the request stays pending past 60 seconds and setup() does not start.
4. Apply the wrapper above and confirm the promise rejects after timeoutMs and setup() proceeds.

Missing Diagnostic Detail

Are you running in an environment without AbortController or modern fetch, such as an older embedded webview? If yes, use only the callback-guard pattern; do not attempt to pass a signal to p5.js loaders, because they do not accept one.

What Not to Do

• Do not rely on the browser's built-in fetch timeout; it varies by browser and may never fire.
• Do not call the same loader again to reset a stalled request; each call starts an independent fetch.
• Do not omit the guard flag; late callbacks can cause duplicate initialization.