jQuery error() Method

Last Updated : 11 Jan, 2024

jQuery error() method in jQuery is used when an element encounters an error that is the element is not loaded correctly. The error() method attaches a function to run when an error event occurs or it triggers the error event.

Syntax:

Addition of function in error event:

$(selector).error(function)

Triggering of error event for some selected elements:

$(selector).error()

Parameters:

function: This parameter is optional and it specifies the function to be run when the error event occurs.

Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>error() method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function () {
            $("img").error(function () {
                $("img").replaceWith(
                    "<h3>Error occurs</h3>");
            });
        });
    </script>
</head>
 
<body>
    <center>
 
        <h1>Welcome to GeeksforGeeks!.</h1>
        <div style="background-color:yellow;">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190220214542/a13.png">
        </div>
        <div style="background-color:green">
 
            <h3> The image will be replaced with specified
                text if the image above encounters an error.
            </h3>
 
        </div>
    </center>
 
</body>
 
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>error() method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("img").error(function () {
                $("img").replaceWith(
                    "<h3>Error </h3>");
            });
        });
    </script>
</head>
 
<body>
    <center>
        <div style="background-color:green">
            <h1>Welcome to GeeksforGeeks!.
            </h1>
        </div>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190220220257/a22.png" 
             width="284"
             height="113">
 
        <h3>Image is replaced with a specified
            text, if error occur in loading.
        </h3>
 
    </center>
 
</body>
 
</html>