Si tratta di un test valido per verificare se un URL fa riferimento a un'immagine in JS/jQuery

Question

$(function() { 
    $("<img>", { 
     src: "http://goo.gl/GWtGo", 
     error: function() { alert("error!"); }, 
     load: function() { alert("ok"); } 
    }); 
}); 

Got ispirazione da How can I test if a URL is a valid image (in javascript)?

UPDATE

Il prossimo passo sarà: come posso incapsulare questo logica in una funzione. Ho provato questo ->http://jsfiddle.net/wp7Ed/2/

$(function() { 
    function IsValidImageUrl(url) { 
     $("<img>", { 
      src: url, 
      error: function() { return false; }, 
      load: function() { return true; } 
     }); 
    } 
    alert(IsValidImageUrl("http://goo.gl/GWtGo")); 
    alert(IsValidImageUrl("http://error")); 
}); 

ma naturalmente non riesce ... come posso tornare da un gestore di eventi internl? O come posso implementarlo?

Answer 1

Non è possibile mai trasformare una chiamata asincrona in una sincrona in javascript.

error e load sono eventi asincroni, in modo da avere a che fare in questo modo:

function IsValidImageUrl(url) { 
    $("<img>", { 
     src: url, 
     error: function() { alert(url + ': ' + false); }, 
     load: function() { alert(url + ': ' + true); } 
    }); 
} 

IsValidImageUrl("http://goo.gl/GWtGo"); 
IsValidImageUrl("http://error"); 

oppure si può analizzare in funzione di callback si definisce altrove in questo modo:

function myCallback(url, answer) { 
    alert(url + ': ' + answer); 
} 

function IsValidImageUrl(url,callback) { 
    $("<img>", { 
     src: url, 
     error: function() { callback(url, false); }, 
     load: function() { callback(url, true); } 
    }); 
} 

IsValidImageUrl("http://goo.gl/GWtGo", myCallback); 
IsValidImageUrl("http://error", myCallback); 

La pulito e versione performante salta l'overhead jQuery come questo

function myCallback(url, answer) { 
    alert(url + ': ' + answer); 
} 

function IsValidImageUrl(url, callback) { 
    var img = new Image(); 
    img.onerror = function() { callback(url, false); } 
    img.onload = function() { callback(url, true); } 
    img.src = url 
} 

IsValidImageUrl("http://goo.gl/GWtGo", myCallback); 
IsValidImageUrl("http://error", myCallback); 

Answer 2

Penso di sì perché un evento error viene generato quando l'immagine è non trovata. Come nel tuo codice, se l'immagine non viene trovata (ovvero non è un percorso valido per un'immagine), l'avviso verrà visualizzato con il messaggio error!.

Ecco un'altra versione di come potrebbe apparire:

$('#imgID').error(function(){ 
    alert('image not found !'); 
}); 

è anche possibile modificare il percorso della tua immagine Cassa immagine precedentemente specificato non è stato trovato in questo modo:

$('#imgID').error(function(){ 
    this.src = 'new path to some image'; 
});