Ich möchte mit jquery überprüfen, ob ein Bild vorhanden ist.

Wie überprüfe ich beispielsweise, ob dieses Bild vorhanden ist?

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

Der Scheck muss mir eine 200 oder den Status ok geben

-------------- bearbeitet -------------------

var imgsrc = $(this).attr('src');
var imgcheck = imgsrc.width;


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

Danke Jean

Verwenden Sie den errorHandler wie folgt:

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

Wenn das Bild nicht geladen werden kann (z. B. weil es nicht unter der angegebenen URL vorhanden ist), wird die Warnung angezeigt:

Aktualisieren:

Ich denke mit:

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

würde ausreichen, um nach einem 404 zu suchen.

Weitere Lesungen:

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

Update 2:

Ihr Code sollte folgendermaßen aussehen:

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

Diese Zeilen sind nicht erforderlich, und das prüft ohnehin nicht, ob die Remote-Datei vorhanden ist:

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

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

Wenn es nicht vorhanden ist, laden Sie das Standardbild oder behandeln Sie den Fehler

$('img[id$=imgurl]').load(imgurl, function(response, status, xhr) {
    if (status == "error") 
        $(this).attr('src', 'images/DEFAULT.JPG');
    else
        $(this).attr('src', imgurl);
    });

Anwendungsfall

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

Hinweis: rmbedeutet hier Risikomanagement.

Ein weiterer Anwendungsfall:

$('#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': falls nicht vorhanden ' http://example/2.png'

• ' http://example/2.png': falls nicht vorhanden ' http://example/3.png'

Von hier aus :

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

jQuery 3.0 entfernt .error . Die korrekte Syntax ist jetzt

$(this).on('error', function(){
    console.log('Image does not exist: ' + this.id); 
});

Um das verzögerte Laden mit der Überprüfung der Bildexistenz zu bewältigen, habe ich dies in jQuery- befolgt.

$('[data-src]').each(function() {
  var $image_place_holder_element = $(this);
  var image_url = $(this).data('src');
  $("<div class='hidden-classe' />").load(image_url, function(response, status, xhr) {
    if (!(status == "error")) {
      $image_place_holder_element.removeClass('image-placeholder');
      $image_place_holder_element.attr('src', image_url);
    }
  }).remove();
});

Grund: Wenn ich eine $image_place_holder_element.load()Methode verwende, wird die Antwort zum Element hinzugefügt, daher schien mir das zufällige Teilen und Entfernen eine gute Lösung zu sein. Hoffe, es funktioniert für jemanden, der versucht, das verzögerte Laden zusammen mit der URL-Überprüfung zu implementieren.