使用 javascript 有没有办法判断服务器上的资源是否可用？例如，我将图像 1.jpg - 5.jpg 加载到 html 页面中。我想每分钟左右调用一次 JavaScript 函数，大致执行以下临时代码...
if "../imgs/6.jpg" exists:
var nImg = document.createElement("img6");
nImg.src = "../imgs/6.jpg";
想法？谢谢！
使用 JavaScript 检查服务器上是否存在图像？
IT技术
javascript
2021-02-02 01:02:26
6个回答
你可以使用类似的东西：
function imageExists(image_url){
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
显然，您可以使用 jQuery/similar 来执行您的 HTTP 请求。
$.get(image_url)
.done(function() {
// Do something now you know the image exists.
}).fail(function() {
// Image doesn't exist - do something else.
})
您可以使用图像预加载器的基本工作方式来测试图像是否存在。
function checkImage(imageSrc, good, bad) {
var img = new Image();
img.onload = good;
img.onerror = bad;
img.src = imageSrc;
}
checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); } );
您可以使用为所有图像提供的内置事件来检查图像是否加载。
在onload与onerror事件将告诉你，如果图像成功加载或发生错误后：
var image = new Image();
image.onload = function() {
// image exists and is loaded
document.body.appendChild(image);
}
image.onerror = function() {
// image did not load
var err = new Image();
err.src = '/error.png';
document.body.appendChild(err);
}
image.src = "../imgs/6.jpg";
一种更好的现代方法是使用 ES6 Fetch API来检查图像是否存在：
fetch('https://via.placeholder.com/150', { method: 'HEAD' })
.then(res => {
if (res.ok) {
console.log('Image exists.');
} else {
console.log('Image does not exist.');
}
}).catch(err => console.log('Error:', err));
确保您正在发出同源请求或在服务器上启用 CORS。
如果有人来到此页面希望在基于React的客户端中执行此操作，您可以执行以下操作，这是 React 团队的 Sophia Alpert 在此处提供的原始答案
getInitialState: function(event) {
return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
return (
<img onError={this.handleError} src={src} />;
);
}