这是检查 URL 是否引用 JS/jQuery 中的图像的有效测试吗

Question

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

灵感来自How can I test if a URL is a valid image (in javascript)?

更新

下一步将是：如何将这个逻辑封装到一个函数中。我试过这个 -> 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"));
});

但它当然会失败......我如何从内部事件处理程序返回？或者我该如何实现？

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

Answer 2

我认为是的，因为当图像未找到时会触发error 事件。与您的代码一样，如果未找到图像（意味着图像的路径无效），警报将显示消息 error!。

这是另一个版本的外观：

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

如果找不到之前指定的图像，您还可以更改图像的路径：

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