JQuery Error Event to load alternate image on error

Question

Am going through the event handling in jquery from the website : jquery events documentation

I have having trouble in replicating jquery error event in my page.

HTML

<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
</head>
<body>

<div id="header">
<img id="register" src="../image/register1.jpg" />

</div>


<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../js/registerForm.js"></script>
</body>
</html>

i have a file register.jpg in the image folder. i deliberately gave register1.jpg to check if the error occurs. When i go to chrome developer tools, i could find the error.

but my jquery code is not sensing the error . i want to load up and alternative image if the first image is not loaded, as given in the documentation example. But , even the alert message is not getting displayed on the error. Please help.

jQuery Code :

$("img").error(function(){

    alert("Error Loading Image");
    $(this).hide();
});

This may help you. You could handle an error directly on the element itself. For example: <img id="register" src="../image/register1.jpg" onerror="this.src='../image/error.jpg'"/> — Grecool
– Grecool, Commented Feb 25, 2015 at 9:02
oh great. But , am just trying to learn events. is there any other situation where we can use error function. Any small example ? — srinath
– srinath, Commented Feb 25, 2015 at 9:03
Your code probably just comes to late (assuming you have it in the file that you embed via the last script element in body?) … by the time you bind the event handler, the event has already fired. — C3roe
– C3roe, Commented Feb 25, 2015 at 9:15

eladcon · Accepted Answer · 2015-02-25 09:32:08Z

1

You are not getting the error because you are attaching the event handler after the error occurred. From the docs you provided:

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.

So if you attach the handler earlier like this plunker, it will get executed.

<head>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
   $("img").error(function(){  
       alert("img error");
       $(this).hide();
   });
});
</script>
</head>

However, the easier solution is to use onerror:

<img onerror="handleError(this);">

answered Feb 25, 2015 at 9:32

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avatar Over a year ago

Content-Security-Police does not allow inline javascript with onerror. Another solution is needed.

Grecool · Accepted Answer · 2015-02-25 09:08:26Z

0

I have recently used a js function to check if a browser can display Data URIs:

function addDataUriDefault()
{
    var data = new Image();
    data.onload = data.onerror = function(){
        if(this.width != 1 || this.height != 1){
            $("img[src^='data']").attr("src", "/Images/Pages/Default.png");
        }
    }
    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; // Test
}

Maybe this example can help you solving your event problem.

answered Feb 25, 2015 at 9:08

Grecool

581 silver badge3 bronze badges

Collectives™ on Stack Overflow

JQuery Error Event to load alternate image on error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related