¿Cómo comprobar si existe una imagen con una URL determinada?

Question

Quiero verificar si existe una imagen usando jquery.

Por ejemplo ¿cómo puedo comprobar esta imagen existe

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

el cheque me tiene que dar un 200 o bien el estado

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

Gracias Jean

Answer 1

uso del error controlador de la siguiente manera:

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

Si la imagen no puede ser cargado (por ejemplo, debido a que no está presente en la URL suministrado), se muestra la alerta:

Actualización:

Creo que usando:

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

sería suficiente para comprobar si hay una

404.

Más Lecturas:

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

Actualizar 2:

El código debería ser así:

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

No hay necesidad de estas líneas y que no comprobará si el archivo remoto existe de todos modos:

var imgcheck = imgsrc.width;  

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

Answer 2

De 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

si la carga de imágenes por defecto no lo existe o manejar el error

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

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

Answer 5

caso de uso

$('#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 aquí gerencia de riesgos.

---

Otro caso de 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': si no existe 'http://example/2.png'

• 'http://example/2.png': si no existe 'http://example/3.png'