这是一个有效的测试，用于检查URL是否引用JS / jQuery中的Image

$(function() { $("", { 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) { $("", { 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) { $("", { 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) { $("", { 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'; });