$(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"));
});
当然它失败了...我如何从内部事件处理程序返回?或者我该如何实现?
最佳答案
在 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);
关于javascript - 这是检查 URL 是否引用 JS/jQuery 中的图像的有效测试吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4669111/