Является ли это действительным тестом, чтобы проверить, относится ли URL к изображению в JS/jQuery

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

Получилось вдохновение от Как проверить, является ли URL-адрес допустимым изображением (в javascript)?

UPDATE

Следующим шагом будет: как я могу инкапсулировать эту логику в функцию. Я пробовал это → 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"));
});

но, конечно, это не удается... как я могу вернуться из обработчика событий internl? Или как это реализовать?

Ответ 1

Вы никогда не сможете превратить асинхронный вызов в синхронный в javascript.

error и load являются асинхронными событиями, поэтому вы должны сделать это следующим образом:

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

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

или вы можете проанализировать функцию обратного вызова, которую вы определяете в другом месте:

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

Чистая и функциональная версия пропускает служебные данные jQuery, подобные этому

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

Ответ 2

Я думаю, да, потому что событие error запускается, когда изображение не найдено. Как и в вашем коде, если изображение не найдено (что означает не допустимый путь к изображению), в сообщении появляется сообщение error!.

Вот еще одна версия, как она может выглядеть:

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

Вы также можете изменить путь своего изображения в случае, если ранее указанное изображение не было найдено следующим образом:

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