Как проверить, существует ли изображение с заданным URL?

Question

Я хочу проверить, существует ли изображение с помощью jquery.

Например, как я могу проверить этот файл существует

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

чек должен дать мне 200 или состояние нормально

-------------- 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 } 

Благодаря Жан

Answer 1

Используйте error обработчика так:

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

Если не может быть загружено изображение (например, потому что он не присутствует в прилагаемом URL), будет выдано предупреждение:

Обновление:

Я думаю, с помощью:

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

будет достаточно, чтобы проверить на 404.

Больше Показания:

• http://www.jibbering.com/2002/4/httprequest.html
• http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/

Update 2:

Ваш код должен выглядеть так:

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

Нет необходимости в этих линиях и что не будет проверять, если удаленный файл существует в любом случае:

var imgcheck = imgsrc.width;  

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

Answer 2

От 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'); 
}); 

Answer 3

, если оно не существует нагрузки изображение по умолчанию или обрабатывать ошибку

$('img[id$=imgurl]').load(imgurl, function(response, status, xhr) { 
    if (status == "error") 
     $(this).attr('src', 'images/DEFAULT.JPG'); 
    else 
     $(this).attr('src', imgurl); 
    }); 

Answer 4

$.ajax({ 
    url:'http://www.example.com/somefile.ext', 
    type:'HEAD', 
    error: function(){ 
      //do something depressing 
    }, 
    success: function(){ 
      //do something cheerful :) 
    } 
}); 

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

Answer 5

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; 
}; 

---

Примечание: rm означает здесь Managment риска.

---

Другой вариант использования:

$('#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': если не существует 'http://example/2.png'

• 'http://example/2.png': если не существует 'http://example/3.png'