Image Load Event Debugger - Online Test onload/onerror

The onload event fires when an image has been successfully downloaded and decoded by the browser. At this point, the image's naturalWidth and naturalHeight properties are available, and the image can be rendered to a canvas or displayed in the DOM. This event is crucial for triggering actions that depend on the image being fully available, such as starting animations, updating UI states, or measuring image dimensions for responsive layouts.

The onerror event triggers when the browser fails to load the image. Common causes include: 404 Not Found (the URL points to a non-existent resource), DNS resolution failure (the domain doesn't exist), network errors (timeouts, connection refused), invalid image data (the server returned a non-image response with a 200 status), CORS issues (when using cross-origin images in canvas), and server errors (5xx status codes). Always implement an onerror handler to provide fallback images or graceful degradation in production applications.

This happens when the server returns a 200 OK status but the content is not a valid image format. Browsers are lenient when you open a URL directly — they'll display whatever the server returns. However, the Image object strictly validates the response: if the MIME type isn't an image format (like image/png, image/jpeg, image/webp, image/svg+xml), or if the binary data is corrupted, onerror fires. This is a common pitfall when debugging image loading issues. Use this tool to test URLs and see exactly which event fires.

Use performance.now() or Date.now() to capture timestamps before setting the image src and inside the onload callback. The difference gives you the exact loading duration in milliseconds. This tool automates that process — every test shows the precise load time. For production monitoring, consider using the Resource Timing API (performance.getEntriesByType('resource')) which provides detailed network timing breakdowns including DNS, TCP, TLS, and TTFB for each image.

Cross-origin images load successfully in <img> tags and trigger onload normally — CORS does not block basic image display. However, if you try to draw a cross-origin image onto a <canvas> without the crossorigin="anonymous" attribute and proper CORS headers on the server, the canvas becomes tainted and you cannot call toDataURL() or getImageData(). The image onload event still fires, but subsequent canvas operations will throw a security error. Always set img.crossOrigin = 'anonymous' before setting src if you plan to use canvas operations.

Yes. With the loading="lazy" attribute on <img> tags, the browser defers loading until the image approaches the viewport. The onload and onerror events do not fire until the image actually starts loading. If an image never enters the viewport, these events may never trigger. When testing with JavaScript new Image() (as this tool does), lazy loading is not applicable — the image begins loading immediately upon setting src, which gives you the most direct way to debug load events. Keep this distinction in mind when debugging lazy-loaded images in your application.