error Event?The error event fires on elements (commonly <img>) when the browser fails to load that resource. Bind with .on("error", handler) (since 1.7) and trigger with .trigger("error").
$("#book")
.on("error", function () {
// resource failed to load
})
.attr("src", "missing.png"); // bind BEFORE setting src
// Trigger for tests:
$("#book").trigger("error");
// Do NOT: $(window).on("error", …) for script errors| Need | Use |
|---|---|
| Broken image / resource load | $("img").on("error", fn) |
| Successful resource load | .on("load", fn) |
| Script exceptions | window.onerror (not jQuery) |
| Ajax HTTP failure | ajaxError / .fail() |
| Legacy shorthand | .error() — removed in 3.0 |
error EventBind first, set src second, and keep fallbacks loop-safe.
<img>)..on("error", handler) before changing src.src (or let the browser load a broken URL)..one("error") or a guaranteed-valid fallback to avoid loops.| Piece | Required? | Role |
|---|---|---|
handler | Yes | function(event) — runs when load fails |
| Bind order | Critical | .on("error") before .attr("src") |
.trigger("error") | Optional | Fire handlers without a real failure |
.one("error") | Optional | Run once — safer for fallbacks |
select image element
bind .on("error", handler) // must happen first
set image.src = url
when browser fails to load url:
fire error event on the element
call each registered handler(event)
if handler sets a new src that also fails:
error fires again → risk of infinite loop
prefer .one("error") or a valid fallbackKeep these facts handy while wiring image fallbacks.
| Topic | Detail |
|---|---|
| Bind | $(el).on("error", handler) |
| Unbind | $(el).off("error" [, handler]) |
| Once | $(el).one("error", handler) |
| Trigger | $(el).trigger("error") |
| Since | .on("error") 1.7 · .trigger("error") 1.0 |
| Typical target | <img> (and other loaded resources) |
| Protocol tip | May not fire reliably under file: — use http(s) |
| Removed API | .error() removed in jQuery 3.0 |
Bind an error handler on a demo image, then load a missing URL or fire trigger("error").
Demo image below updates from the handler. Missing URLs need network/HTTP (not file:).
Ready — pick an action and click Run.Short, copy-ready snippets based on the official API demos. Prefer text logs over alert() in real apps.
srcOfficial pattern: attach error first, then load a missing image.
$("#book")
.on("error", function () {
$("#log").text("Handler for error called.");
})
.attr("src", "missing.png");.on("error") registers the handler on #book..attr("src") starts the browser request.error.Official idea: swap src inside the handler — keep the fallback valid.
var fallback =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="96" height="64">' +
'<rect fill="#e2e8f0" width="96" height="64"/>' +
'<text x="48" y="38" text-anchor="middle" fill="#64748b" font-size="12">N/A</text>' +
"</svg>"
);
$("img.thumb")
.on("error", function () {
$(this).attr("src", fallback);
$("#log").append(" Replaced. ");
})
.attr("src", "missing.png");error.$(this).attr("src", fallback) replaces the broken URL.data: SVG cannot 404, so the handler does not loop.error again forever..trigger("error")Official demo: fire the handler from a button without a real network failure.
$("#book").on("error", function () {
$("#log").text("Handler for error called.");
});
$("#other").on("click", function () {
$("#book").trigger("error");
});error handler..trigger("error").Bind per image and record which thumbnail failed.
$(".gallery img").each(function () {
var $img = $(this);
$img
.on("error", function () {
$("#log").append(
"error on id=" + $img.data("id") +
" (" + $img.attr("alt") + ")\n"
);
})
.attr("src", "missing-" + $img.data("id") + ".png");
});$img keeps the right id/alt for the log.src fires its own error..one("error") + SVG FallbackRun once, swap to an inline SVG, and avoid infinite loops.
var fallbackSvg =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">' +
'<rect fill="#e2e8f0" width="96" height="96"/>' +
'<text x="48" y="54" text-anchor="middle" fill="#64748b" font-size="12">User</text>' +
"</svg>"
);
$("#avatar")
.one("error", function () {
$(this).attr("src", fallbackSvg);
$("#log").text("Swapped to SVG fallback once.");
})
.attr("src", "missing-avatar.png");.one("error") auto-unbinds after the first call.data: SVG that always loads.error loop.Check these before shipping image fallback handlers.
srcSetting src first can miss a fast failure. Always attach .on("error") first.
If the replacement URL also fails, error fires again. Use .one() or a valid data: URI.
Do not put jQuery .on("error") on window. Use window.onerror for exceptions.
file: may not fireLocal file: pages often skip HTTP-style failure reporting. Test over http(s).
The element error event is a long-standing browser event. Prefer .on("error") (jQuery 1.7+). The .error() shorthand was removed in jQuery 3.0.
Works in every browser that loads images and runs your jQuery build. Prefer current jQuery 3.x and the .on() / .trigger() APIs.
Bottom line: Safe for everyday apps. Bind before src, keep fallbacks valid, and never confuse this with window.onerror.
| Approach | Cost | Best for |
|---|---|---|
One .on("error") per image | Cheap | Small galleries / avatars |
.one("error") + SVG fallback | Cheap | Loop-safe placeholders |
| Heavy work on every failure | Expensive | Avoid — keep handlers tiny |
Error handlers usually run rarely. Keep them light: swap a src, log an id, or show a short status — not heavy layout work.
.on("error") before .attr("src")..one() or a valid data: SVG.window.onerror.One line: jQuery’s error event is for failed resource loads — bind it before src, and keep fallbacks loop-safe.
See the removed shorthand and how to migrate to .on("error").
8 people found this page helpful