Cách kiểm tra xem hình ảnh có tồn tại với url đã cho không?

Question

Tôi muốn kiểm tra xem một hình ảnh có tồn tại không bằng cách sử dụng jquery.

Ví dụ làm thế nào để kiểm tra hình ảnh này tồn tại

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

việc kiểm tra phải cung cấp cho tôi một 200 hoặc tình trạng 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 } 

Cảm ơn Jean

Answer 1

Sử dụng error handler như thế này:

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

Nếu hình ảnh không thể được nạp (ví dụ, bởi vì nó không có mặt tại địa chỉ URL được cung cấp), cảnh báo sẽ được hiển thị:

Cập nhật:

tôi nghĩ rằng sử dụng:

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

sẽ là đủ để kiểm tra một 404.

More Bài đọc:

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

Cập nhật 2:

Mã của bạn sẽ như thế này:

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

Không cần những dòng này và điều đó sẽ không kiểm tra xem các tập tin từ xa tồn tại anyway:

var imgcheck = imgsrc.width;  

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

Answer 2

Từ 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

nếu nó không tồn tại hình ảnh mặc định tải hoặc xử lý lỗi

$('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 :) 
    } 
}); 

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

Answer 5

sử dụng 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; 
}; 

---

Lưu ý: rm nghĩa đây managment rủi ro.

---

Một Trường hợp sử dụng:

$('#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': nếu không tồn tại 'http://example/2.png'

• 'http://example/2.png': nếu không tồn tại 'http://example/3.png'