javascript 检查图像是否存在而不加载它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13937116/
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
Check if image exists without loading it
提问by James Cazzetta
I am currently using following script in a hover-functionality:
我目前在悬停功能中使用以下脚本：
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
It loads every image each after the other, causing to slow down the entire website (or even crashing).
它一个接一个地加载每个图像，导致整个网站变慢（甚至崩溃）。
Is there a way to check if an image exists, though prevent loading it(fully) using javascript?
有没有办法检查图像是否存在，但防止使用javascript（完全）加载它？
Thanks alot!
非常感谢！
采纳答案by Jay Blanchard
Since JavaScript (and therefore jQuery) is client-side and the image resides server-side before loading there is no way to check to see if the image exists without using Ajax or your server-side scripting to make sure the image exists.
由于 JavaScript（因此 jQuery）是客户端，并且图像在加载之前驻留在服务器端，因此如果不使用 Ajax 或服务器端脚本来确保图像存在，则无法检查图像是否存在。
回答by Mevin Babu
There's noway determining using javascript or jQuery if an image exists without loadingit.
有没有办法，如果图像不存在使用JavaScript或jQuery的确定加载它。
workaround:
解决方法：
The only way to check if an image exists on the server side would be to try loading the image to a hidden divor something and check if the image is there or not and then display it.
检查服务器端是否存在图像的唯一方法是尝试将图像加载到隐藏div或其他位置，然后检查图像是否存在，然后显示它。
or you can use some server side language of your choice like ( php, asp, jsp, python, etc ) and send the request to the image to the server side language (preferably using AJAX) and let the server side script check if the image exists or not and send back the image if present or sent an error code if not present.
或者您可以使用您选择的某些服务器端语言（如 php、asp、jsp、python 等）并将对图像的请求发送到服务器端语言（最好使用 AJAX）并让服务器端脚本检查图像存在与否，如果存在则发回图像，如果不存在则发送错误代码。
回答by wiktor
My solution:
我的解决方案：
function imageExists(url) {
return new Promise((resolve, reject) => {
const img = new Image(url);
img.onerror = reject;
img.onload = resolve;
const timer = setInterval(() => {
if (img.naturalWidth && img.naturalHeight) {
img.src = ''; /* stop loading */
clearInterval(timer);
resolve();
}
}, 10);
img.src = url;
});
}
Example:
例子：
imageExists(url)
.then(() => console.log("Image exists."))
.catch(() => console.log("Image not exists."));
回答by Asif hhh
Here's how you can check if an image exists:
以下是检查图像是否存在的方法：
function checkImage(src) {
var img = new Image();
img.onload = function() {
// code to set the src on success
};
img.onerror = function() {
// doesn't exist or error loading
};
img.src = src; // fires off loading of image
}
Here's a working implementation http://jsfiddle.net/jeeah/
这是一个有效的实现http://jsfiddle.net/jeeah/
