How to check if image exists with given url?

I want to check if an image exists using jquery.

For example how do I check this image exists

http://www.google.com/images/srpr/nav_logo14.png

the check must give me a 200 or status ok

--------------edited-------------------

var imgsrc = $(this).attr('src');
var imgcheck = imgsrc.width;




if (imgcheck==0) {
alert("You have a zero size image");
} else { //do rest of code }

Thanks Jean

138701 次浏览
小开
最佳答案

Use the error handler like this:

$('#image_id').error(function() {
alert('Image does not exist !!');
});

If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:

Update:

I think using:

$.ajax({url:'somefile.dat',type:'HEAD',error:do_something});

would be enough to check for a 404.

More Readings:

Update 2:

Your code should be like this:

$(this).error(function() {
alert('Image does not exist !!');
});

No need for these lines and that won't check if the remote file exists anyway:

var imgcheck = imgsrc.width;


if (imgcheck==0) {
alert("You have a zero size image");
} else {
//execute the rest of code here
}
小开

From here:

// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});
小开

if it doesnt exist load default image or handle error

$('img[id$=imgurl]').load(imgurl, function(response, status, xhr) {
if (status == "error")
$(this).attr('src', 'images/DEFAULT.JPG');
else
$(this).attr('src', imgurl);
});
小开 
$.ajax({
url:'http://www.example.com/somefile.ext',
type:'HEAD',
error: function(){
//do something depressing
},
success: function(){
//do something cheerful :)
}
});

from: http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06

小开

Use Case

$('#myImg').safeUrl({wanted:"http://example/nature.png",rm:"/myproject/images/anonym.png"});

API :

$.fn.safeUrl=function(args){
var that=this;
if($(that).attr('data-safeurl') && $(that).attr('data-safeurl') === 'found'){
return that;
}else{
$.ajax({
url:args.wanted,
type:'HEAD',
error:
function(){
$(that).attr('src',args.rm)
},
success:
function(){
$(that).attr('src',args.wanted)
$(that).attr('data-safeurl','found');
}
});
}




return that;
};

Note : rm means here risk managment .

Another Use Case :

$('#myImg').safeUrl({wanted:"http://example/1.png",rm:"http://example/2.png"})
.safeUrl({wanted:"http://example/2.png",rm:"http://example/3.png"});

  • 'http://example/1.png' : if not exist 'http://example/2.png'

  • 'http://example/2.png' : if not exist 'http://example/3.png'

小开

jQuery 3.0 removed .error. Correct syntax is now

$(this).on('error', function(){
console.log('Image does not exist: ' + this.id);
});
小开

To handle the lazy loading with image existence check I followed this in jQuery-

$('[data-src]').each(function() {
var $image_place_holder_element = $(this);
var image_url = $(this).data('src');
$("<div class='hidden-classe' />").load(image_url, function(response, status, xhr) {
if (!(status == "error")) {
$image_place_holder_element.removeClass('image-placeholder');
$image_place_holder_element.attr('src', image_url);
}
}).remove();
});

Reason: if I am using $image_place_holder_element.load() method it will be adding the response to the element, so random div and removing it appeared me a good solution. Hope it works for someone trying to implement lazy loading along with url check.


提交答案