Come verificare se l'immagine esiste con un determinato URL?

Question

Voglio controllare se esiste un'immagine usando jquery.

Per esempio come faccio a verificare questa immagine esiste

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

l'assegno mi deve dare un 200 o di stato 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 } 

Grazie Jean

Answer 1

Utilizzare il error handler in questo modo:

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

Se l'immagine non può essere caricato (ad esempio, perché non è presente alla URL in dotazione), viene visualizzato l'avviso:

Aggiornamento:

Penso che usando:

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

sarebbe sufficiente a verificare la presenza di un 404.

più letture:

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

Aggiornamento 2:

Il codice dovrebbe essere simile a questo:

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

Non c'è bisogno di queste righe e che non controllerà se il file in modalità remota in ogni caso:

var imgcheck = imgsrc.width;  

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

Answer 2

Da 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

se un'immagine predefinita carico doesnt esiste o gestire errore

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

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

---

Nota: rm significa qui managment rischio.

---

Un altro caso d'uso:

$('#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': se non esiste 'http://example/2.png'

• 'http://example/2.png': se non esiste 'http://example/3.png'