Wie überprüft man, ob ein Bild mit einer gegebenen URL existiert?

Möchte ich überprüfen, ob ein Bild vorhanden ist, unter Verwendung von jquery.

Zum Beispiel, wie kann ich prüfen, ob dieses Bild existiert

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

die prüfen muss, geben Sie mir einen 200 oder status ok

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

Dank
Jean

Kommentar zu dem Problem - Öffnen
Sie sind ganz in Ihre Rechte zu veröffentlichen und akzeptieren die Antwort auf Ihre eigene Frage. Kommentarautor: sje397
@sje397 Was!... Kommentarautor: X10nD
Wahr. Überprüfen Sie die FAQ. Kommentarautor: sje397

InformationsquelleAutor der Frage X10nD | 2010-08-01

  1. 73

    Verwenden Sie die error handler wie diese:

    $('#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), wird die Warnung angezeigt wird:

    Update:

    Ich denke, mit:

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

    wäre genug, um zu überprüfen, ob ein 404.

    Mehr Lesungen:

    Update 2:

    Ihr code sollte wie folgt sein:

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

    Keine Notwendigkeit für diese Zeilen, und das wird nicht überprüfen, ob die remote-Datei existiert sowieso:

    var imgcheck = imgsrc.width;    

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

    InformationsquelleAutor der Antwort Sarfraz

  2. 27
    $.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function(){
            //do something depressing
    },
    success: function(){
            //do something cheerful :)
    }
});

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

    InformationsquelleAutor der Antwort Helmut

  3. 9

    wenn es nicht vorhanden load default Bild oder Griff Fehler

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

    InformationsquelleAutor der Antwort kiev

  4. 4

    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 : rm bedeutet hier Risiko-managment .

    Ein Weiteres Use Case :

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

    • 'http://example/2.png' : wenn nicht gibt 'http://example/3.png'

    InformationsquelleAutor der Antwort Abdennour TOUMI

  5. 2

    Vom hier:

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

    InformationsquelleAutor der Antwort sje397

Schreibe einen Kommentar