How to get error code on image load error in Jquery? [duplicate]












1
















This question already has an answer here:




  • why $(window).load() is not working in jQuery?

    3 answers




For some legacy reason, I am loading an image via jQuery and on failure I need the error code(404 or 401) to show why did the load fail. How can I achieve it?



var img = $('#test')
.load(function() {
// Do something.
console.log(img);
})
.error(function(jqXHR, error, errorThrown) {
console.log(jqXHR);
console.log(error);
console.log(errorThrown);
if(jqXHR.status && jqXHR.status==404)
{
alert("Something went wrong");
}
})
.attr('src', "http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG");


JsBin










share|improve this question















marked as duplicate by Bhojendra Rauniyar javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 7:30


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • 401 status code means the request is not authorized and it cannot access to the path.

    – Foo
    Nov 21 '18 at 7:15











  • Yes I get that, but I want this in the error callback so that I can handle

    – Ajey
    Nov 21 '18 at 7:17











  • @Bhojendra How is it duplicate ?

    – Ajey
    Nov 21 '18 at 9:06
















1
















This question already has an answer here:




  • why $(window).load() is not working in jQuery?

    3 answers




For some legacy reason, I am loading an image via jQuery and on failure I need the error code(404 or 401) to show why did the load fail. How can I achieve it?



var img = $('#test')
.load(function() {
// Do something.
console.log(img);
})
.error(function(jqXHR, error, errorThrown) {
console.log(jqXHR);
console.log(error);
console.log(errorThrown);
if(jqXHR.status && jqXHR.status==404)
{
alert("Something went wrong");
}
})
.attr('src', "http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG");


JsBin










share|improve this question















marked as duplicate by Bhojendra Rauniyar javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 7:30


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • 401 status code means the request is not authorized and it cannot access to the path.

    – Foo
    Nov 21 '18 at 7:15











  • Yes I get that, but I want this in the error callback so that I can handle

    – Ajey
    Nov 21 '18 at 7:17











  • @Bhojendra How is it duplicate ?

    – Ajey
    Nov 21 '18 at 9:06














1












1








1









This question already has an answer here:




  • why $(window).load() is not working in jQuery?

    3 answers




For some legacy reason, I am loading an image via jQuery and on failure I need the error code(404 or 401) to show why did the load fail. How can I achieve it?



var img = $('#test')
.load(function() {
// Do something.
console.log(img);
})
.error(function(jqXHR, error, errorThrown) {
console.log(jqXHR);
console.log(error);
console.log(errorThrown);
if(jqXHR.status && jqXHR.status==404)
{
alert("Something went wrong");
}
})
.attr('src', "http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG");


JsBin










share|improve this question

















This question already has an answer here:




  • why $(window).load() is not working in jQuery?

    3 answers




For some legacy reason, I am loading an image via jQuery and on failure I need the error code(404 or 401) to show why did the load fail. How can I achieve it?



var img = $('#test')
.load(function() {
// Do something.
console.log(img);
})
.error(function(jqXHR, error, errorThrown) {
console.log(jqXHR);
console.log(error);
console.log(errorThrown);
if(jqXHR.status && jqXHR.status==404)
{
alert("Something went wrong");
}
})
.attr('src', "http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG");


JsBin





This question already has an answer here:




  • why $(window).load() is not working in jQuery?

    3 answers








javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 '18 at 9:21









Anki

24118




24118










asked Nov 21 '18 at 7:13









AjeyAjey

3,85353771




3,85353771




marked as duplicate by Bhojendra Rauniyar javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 7:30


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Bhojendra Rauniyar javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 7:30


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • 401 status code means the request is not authorized and it cannot access to the path.

    – Foo
    Nov 21 '18 at 7:15











  • Yes I get that, but I want this in the error callback so that I can handle

    – Ajey
    Nov 21 '18 at 7:17











  • @Bhojendra How is it duplicate ?

    – Ajey
    Nov 21 '18 at 9:06



















  • 401 status code means the request is not authorized and it cannot access to the path.

    – Foo
    Nov 21 '18 at 7:15











  • Yes I get that, but I want this in the error callback so that I can handle

    – Ajey
    Nov 21 '18 at 7:17











  • @Bhojendra How is it duplicate ?

    – Ajey
    Nov 21 '18 at 9:06

















401 status code means the request is not authorized and it cannot access to the path.

– Foo
Nov 21 '18 at 7:15





401 status code means the request is not authorized and it cannot access to the path.

– Foo
Nov 21 '18 at 7:15













Yes I get that, but I want this in the error callback so that I can handle

– Ajey
Nov 21 '18 at 7:17





Yes I get that, but I want this in the error callback so that I can handle

– Ajey
Nov 21 '18 at 7:17













@Bhojendra How is it duplicate ?

– Ajey
Nov 21 '18 at 9:06





@Bhojendra How is it duplicate ?

– Ajey
Nov 21 '18 at 9:06












2 Answers
2






active

oldest

votes


















1














You can try to use Image class:






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





Overriding onload function to check if the image is ready to use, and overriding onerror function to check if there is some error with the path.






share|improve this answer
























  • Still don't get it - jsbin.com/gowusay/edit?html,js,console

    – Ajey
    Nov 21 '18 at 7:24



















0














The error and load methods are removed from version 3.0. So, I suggest you to use the jQuery on method and bind the JavaScript events on them:



var img = $('#test')
.on('load', function() {
...
})
.on('error', function(msg, url, lineNo, columnNo, error) {
...
})


You can look into the docs for onerror and onload






share|improve this answer


























  • Nope still the same

    – Ajey
    Nov 21 '18 at 7:21


















2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You can try to use Image class:






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





Overriding onload function to check if the image is ready to use, and overriding onerror function to check if there is some error with the path.






share|improve this answer
























  • Still don't get it - jsbin.com/gowusay/edit?html,js,console

    – Ajey
    Nov 21 '18 at 7:24
















1














You can try to use Image class:






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





Overriding onload function to check if the image is ready to use, and overriding onerror function to check if there is some error with the path.






share|improve this answer
























  • Still don't get it - jsbin.com/gowusay/edit?html,js,console

    – Ajey
    Nov 21 '18 at 7:24














1












1








1







You can try to use Image class:






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





Overriding onload function to check if the image is ready to use, and overriding onerror function to check if there is some error with the path.






share|improve this answer













You can try to use Image class:






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





Overriding onload function to check if the image is ready to use, and overriding onerror function to check if there is some error with the path.






var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';





var image = new Image();

image.onload = function () {
console.log('SUCCESS:');
console.log(this);
};
image.onerror = function (e) {
console.log('ERROR:');
console.log(e);
};


image.src = 'http://www.gravatar0.com/avatar/5e7856eb90f924b5cffb9fa75ca905ba?s=32&d=identicon&r=PG';






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 '18 at 7:19









FooFoo

1




1













  • Still don't get it - jsbin.com/gowusay/edit?html,js,console

    – Ajey
    Nov 21 '18 at 7:24



















  • Still don't get it - jsbin.com/gowusay/edit?html,js,console

    – Ajey
    Nov 21 '18 at 7:24

















Still don't get it - jsbin.com/gowusay/edit?html,js,console

– Ajey
Nov 21 '18 at 7:24





Still don't get it - jsbin.com/gowusay/edit?html,js,console

– Ajey
Nov 21 '18 at 7:24













0














The error and load methods are removed from version 3.0. So, I suggest you to use the jQuery on method and bind the JavaScript events on them:



var img = $('#test')
.on('load', function() {
...
})
.on('error', function(msg, url, lineNo, columnNo, error) {
...
})


You can look into the docs for onerror and onload






share|improve this answer


























  • Nope still the same

    – Ajey
    Nov 21 '18 at 7:21
















0














The error and load methods are removed from version 3.0. So, I suggest you to use the jQuery on method and bind the JavaScript events on them:



var img = $('#test')
.on('load', function() {
...
})
.on('error', function(msg, url, lineNo, columnNo, error) {
...
})


You can look into the docs for onerror and onload






share|improve this answer


























  • Nope still the same

    – Ajey
    Nov 21 '18 at 7:21














0












0








0







The error and load methods are removed from version 3.0. So, I suggest you to use the jQuery on method and bind the JavaScript events on them:



var img = $('#test')
.on('load', function() {
...
})
.on('error', function(msg, url, lineNo, columnNo, error) {
...
})


You can look into the docs for onerror and onload






share|improve this answer















The error and load methods are removed from version 3.0. So, I suggest you to use the jQuery on method and bind the JavaScript events on them:



var img = $('#test')
.on('load', function() {
...
})
.on('error', function(msg, url, lineNo, columnNo, error) {
...
})


You can look into the docs for onerror and onload







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 '18 at 7:33


























community wiki





3 revs
Bhojendra Rauniyar














  • Nope still the same

    – Ajey
    Nov 21 '18 at 7:21



















  • Nope still the same

    – Ajey
    Nov 21 '18 at 7:21

















Nope still the same

– Ajey
Nov 21 '18 at 7:21





Nope still the same

– Ajey
Nov 21 '18 at 7:21



Popular posts from this blog

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

SQL update select statement

WPF add header to Image with URL pettitions [duplicate]