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

Quiero verificar si existe una imagen usando jquery.

Por ejemplo, cómo verifico que esta imagen existe

http://sofes.miximages.com/jquery/nav_logo14.png 

el cheque debe darme un 200 o estado de acuerdo

————– editado ——————-

 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

Use el controlador de error esta manera:

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

Si la imagen no se puede cargar (por ejemplo, porque no está presente en la URL proporcionada), se muestra la alerta:

Actualizar:

Creo que usando:

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

sería suficiente para buscar un 404.

Más lecturas:

Actualización 2:

Tu código debería ser así:

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

No es necesario para estas líneas y eso 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 } 
 $.ajax({ url:'http://www.example.com/somefile.ext', type:'HEAD', error: function(){ //do something depressing }, success: function(){ //do something cheerful :) } }); 

desde: http://sofes.miximages.com/jquery/DEFAULT.JPG‘); else $(this).attr(‘src’, imgurl); });

Caso de uso

 $('#myImg').safeUrl({wanted:"http://sofes.miximages.com/jquery/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í gestión de riesgos.


Otro caso de uso:

 $('#myImg').safeUrl({wanted:"http://sofes.miximages.com/jquery/1.png",rm:"http://sofes.miximages.com/jquery/2.png"}) .safeUrl({wanted:"http://sofes.miximages.com/jquery/2.png",rm:"http://sofes.miximages.com/jquery/3.png"}); 
  • http://example/1.png ‘: si no existe ‘ http://example/2.png

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

Desde aquí :

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