.error()

Bind an event handler to the "error" JavaScript event.

.error(function(eventObjectEvent))🡢 jQuery

function(eventObjectEvent) FunctionA function to execute when the event is triggered.

.error(eventData, function(eventObjectEvent))🡢 jQuery

eventData AnythingAn object containing data that will be passed to the event handler.
function(eventObjectEvent) FunctionA function to execute each time the event is triggered.

Note: This API has been removed in jQuery 3.0; please use .on( "error", handler ) instead of .error( handler ) and .trigger( "error" ) instead of .error().

The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

For example, consider a page with a simple image element:

<img alt="Book" id="book" />

The event handler can be bound to the image:

$("#book")
  .error(function () {
    alert("Handler for .error() called.");
  })
  .attr("src", "missing.png");

If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:

Handler for .error() called.

The event handler must be attached before the browser fires the error event, which is why the example sets the src attribute after attaching the handler. Also, the error event may not be correctly fired when the page is served locally; error relies on HTTP status codes and will generally not be triggered if the URL uses the file: protocol.

Note: A jQuery error event handler should not be attached to the window object. The browser fires the window's error event when a script error occurs. However, the window error event receives different arguments and has different return value requirements than conventional event handlers. Use window.onerror instead.

To replace all the missing images with another, you can update the src attribute inside the callback passed to .error(). Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely.

HTML
// If missing.png is missing, it is replaced by replacement.png
$("img")
  .error(function () {
    $(this).attr("src", "replacement.png");
  })
  .attr("src", "missing.png");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)