Another solution coming soen based on an article that today no longer exists (link from the Archives).
// First a couple helper functions
function $(id) {
return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o,t) { return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;}
// Here's the meat and potatoes
function image(src,cfg) { var img, prop, target;
cfg = cfg || (isType(src,'o') ? src : {});
img = $(src);
if (img) {
src = cfg.src || img.src;
} else {
img = document.createElement('img');
src = src || cfg.src;
}
if (!src) {
return null;
}
prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
img.alt = cfg.alt || img.alt;
// Add the image and insert if requested (must be on DOM to load or
// pull from cache)
img.src = src;
target = $(cfg.target);
if (target) {
target.insertBefore(img, $(cfg.insertBefore) || null);
}
// Loaded?
if (img.complete) {
if (img[prop]) {
if (isType(cfg.success,'f')) {
cfg.success.call(img);
}
} else {
if (isType(cfg.failure,'f')) {
cfg.failure.call(img);
}
}
} else {
if (isType(cfg.success,'f')) {
img.onload = cfg.success;
}
if (isType(cfg.failure,'f')) {
img.onerror = cfg.failure;
}
}
return img;
}
Use:
image('http://somedomain.com/image/typooed_url.jpg', {
success : function () {alert(this.width)},
failure : function () {alert('Oops!')}
});
image('https://www.gravatar.com/avatar/bac48b9b301f4b2aea7ec399a14b8bc9?s=128&d=identicon&r=PG', {
success : function () {/** ... */},
failure : function () {alert('Oops!')},
target : 'successImageContainer'
});
Demo in the Fiddle.
At first glance it looks like an over-appeal, but if it turns out to be a 404 you’d have to make some conditions and such then some callbacks come in handy.
Thank you very much, but I did the test here and it does not do the Alert, it is as if it returns something. But if you access this image you will see that it gives error in console 404.
– Edmo
I did a test and it seemed to work: http://jsbin.com/saritewu/1/edit
– bfavaretto
Rolled here @bfaretto. Even thanks :)
– Edmo
In this link of the Archives I mentioned in my reply the author lists a number of peculiarities between browsers regarding onerror (and onload). JS is not my strong enough to say whether trusting completely (and solely) in onerror is safe or not.
– Bruno Augusto
Thanks @Brunoaugusto, I read the link.
– bfavaretto
So what? Does it influence anything?
– Bruno Augusto
@Brunoaugusto From what I understand, roughly speaking, the biggest problem is with cache. Whether the goal is to control the loading of something that may or may not be accessible intermittently,
onerror
can be problem. If it is to check if a resource does not exist and never existed,onerror
must be sufficient.– bfavaretto