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

Can a sorcerer learn a 5th-level spell early by creating spell slots using the Font of Magic feature?

ts Property 'filter' does not exist on type '{}'

Notepad++ export/extract a list of installed plugins