如何檢查圖像是否存在給定的網址？

Question

我想檢查圖像是否存在使用jQuery。

比如我如何檢查該圖像是否

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

的支票必須給我一個200或狀態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 } 

感謝 讓

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/

更新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

使用案例

$('#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在這裏是指風險同治。

---

另一種使用情況：

$('#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'