jQuery：检查图像是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3327655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Check if image exists
提问by Marko
I'm loading an image path via jQuery $.ajax and before showing the image I'd like to check if it in fact exists. Can I use the image load/ready event or something similar to determine that the file path is valid?
我正在通过 jQuery $.ajax 加载图像路径，在显示图像之前我想检查它是否确实存在。我可以使用图像加载/就绪事件或类似的东西来确定文件路径有效吗？
Having .myimage set to display: none, I'm hoping to do something like
将 .myimage 设置为显示：无，我希望做类似的事情
$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
$(this).show();
});
Is anything like that possible?
有可能吗？
回答by Reigel
Well, you can bind .error()handler...
好吧，您可以绑定.error()处理程序...
like this,
像这样，
$(".myimage").error(function(){
$(this).hide();
});
well, yours is okay already with load-event
好吧，你的加载事件已经没问题了
$(".myimage").load(function() {
$(this).show();
});
the problem with this is if Javascript was disabled the image will not ever show...
问题是如果 Javascript 被禁用，图像将永远不会显示......
回答by Aamir Afridi
Try:
尝试：
function urlExists(testUrl) {
var http = jQuery.ajax({
type:"HEAD",
url: testUrl,
async: false
})
return http.status;
// this will return 200 on success, and 0 or negative value on error
}
then use
然后使用
if(urlExists('urlToImgOrAnything') == 200) {
// success
}
else {
// error
}
回答by superjaz1
An old thread I know but I think it could be improved. I noticed OP having intermittent problems which could be due to loading of the image and error checking simultaneously. It would be better to let the image load first and then check for errors:
我知道一个旧线程，但我认为它可以改进。我注意到 OP 有间歇性问题，这可能是由于同时加载图像和错误检查造成的。最好先加载图像，然后检查错误：
$(".myimage").attr("src", imagePath).error(function() {
// do something
});
回答by Jeffrey Blake
Since you're already doing an AJAX request, I would offload this to the server-side app that is supporting your AJAX. It's trivial to check to see if a file exists from the server, and you could set variables in the data you send back to specify results.
由于您已经在执行 AJAX 请求，因此我会将其卸载到支持您的 AJAX 的服务器端应用程序。检查服务器中是否存在文件很简单，您可以在发送回的数据中设置变量以指定结果。
回答by Chris
This question is a couple years old, but here's a better example usage for the error handler for anyone looking at this.
这个问题已经有几年了，但是对于任何查看此问题的人，这里有一个更好的错误处理程序示例用法。
$("img")
.error(function(){
$(this).hide();
})
.attr("src", "image.png");
You need to attach the error handler before you try to load the image in order to catch the event.
在尝试加载图像以捕获事件之前，您需要附加错误处理程序。
Source: http://api.jquery.com/error/
回答by ruel
This is what I did of mine:
这是我对我所做的：
$.get( 'url/image', function(res){
//Sometimes has a redirect to not found url
//Or just detect first the content result and get the a keyword for 'indexof'
if ( res.indexOf( 'DOCTYPE' ) !== -1 ) {
//not exists
} else {
//exists
}
});
