Javascript 测试照片是否存在

我正偏离这条思路：

这是我尝试过的代码，它总是返回“OK”，我认为这是因为异步/同步。它被设置为false，但我将其设置为true，因为我在控制台中看到了一条警告

我怎么才能不说“好”呢？如果我在数组源代码中尝试3以上的任何操作，在控制台中会出现404错误，但在看到“OK”之后

var photosArray=[“1.jpg”、“2.jpg”、“3.jpg”、“4.jpg”]；
var src=photosArray[5]；
log（'src:'+src）；
函数imageExists（src）{
var http=new XMLHttpRequest（）；
http.open（'HEAD'，src，true）；
http.send（）；
如果（http.status！==404）{
console.log（'ok'）；
返回“好”；
}
否则{
console.log（'fail'）；
返回“失败”；
}
//返回http.status！=404；返回原始代码
}
图像存在（src）；

除其他外，您需要一个事件处理程序来执行测试

<script>
 var photosArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
 var src = photosArray[4] + '?v=' + new Date().getTime(); // photosArray[5] doesn't exist because arrays are 0-indexed

 console.log('src: ' + src);

 function imageExists(src){
    var http = new XMLHttpRequest();
    var exists;

    http.open('GET', src, true);

    http.onreadystatechange = function(){
        if (http.readyState === 4 && http.status >= 200 && http.status < 300) {
            console.log('okay');
            exists = true;
            // do something
        }
        else {
            console.log('fail');
            exists = false;
            // do something
        }
        // do something, perhaps foo(exists);
    }

    http.send();

  }

  imageExists(src);
</script>

或

img{display:none；}
img.loaded{显示：块；宽度：100%；}
img.secondary-image.loaded{显示：内联块；宽度：20%；}

或使用jQuery

$.post(src, {"photo": "1.jpg"}).done(function(data) {
    //Server returns 'true' or 'false'
    if(data) {
        console.log('okay');
    }
});

---

为什么src指向数组的第5个索引，而@Reddy只有最多3个索引可执行的副本，因为我知道它不存在，所以我希望它失败purpose@Reddy回顾过去（酷词）我想我明白你的意思了。我在数组中定义的所有四个照片源都存在，它们位于同一文件夹中。因此，我应该拉出其中一个，并且仍然使用链接，看看会发生什么，而不是没有名称/未定义的值。我想这就是为什么你在http.open参数中设置了false标志，但我确实将其设置为true，因为有一个警告，关于，我必须阅读你的文章更多。我知道第5个索引不存在，我故意这么做是因为我想让它失败。这一点是为了一个我建立的网站，如果客户端不提供照片，就不会显示照片容器。“缓存破坏”部分的观点很好。。。我看过一些帖子在使用。在ready上，其中一个使用了new Image（），有人说它不一定会在浏览器中存储照片，无论如何，谢谢你的提示。我还得再四处搜索，尝试不同的方法。是的，承诺仍然是我需要学习的东西，我在另一个项目中遇到了整个异步/同步问题。进展不顺利。我也（不相关）不喜欢你不能实际删除脚本。最好使用图像标记和onload事件，因为你不会受到相同来源的限制。@joehungjohn是的，我只是看了你的编辑，我没有冒犯的意思。同步XHR调用会破坏性能，因为它会锁定浏览器直到请求完成，这可能需要2秒或30秒，对用户来说并不理想。你可以调查一下，但我认为那太过分了。@jfriend00我正要提出这个建议！是的，你能做的是这样的：

为什么发一篇帖子却得不到？我提供的链接也提供了一个jquery解决方案，但使用了.get，我认为关于异步响应的注释最终是我想要的。它是在我发送请求中的{“photo”：“1.jpg”}对象时发布的。您还可以使用GET并将照片名称添加为URL参数。取决于路由的配置方式。我建议使用jQuery是因为您不必手动管理异步特性。只有当服务器成功返回结果时，代码才会解析。这一点很好。我可能得另找一条路，我不知道。。。如果你的方法可行的话，不用挣扎。。。啊，现在不能思考。谢谢你的时间，我真的试过了。例如，将源代码设置为7.jpg（不存在的源代码）也会返回“OK”。我试图查看数据是什么，当记录/发出警报时，它就是页面本身。我不确定你提供的东西是否真的有用。不管怎样，我必须弄清楚我到底想做什么。

<img src="/path/to/whatever.jpg" onerror="this.style.display='none'">

<style>img.not-loaded { display: none; }</style>
<img src="/path/to/whatever.jpg" class="not-loaded" onload="this.className=''">

$.post(src, {"photo": "1.jpg"}).done(function(data) {
    //Server returns 'true' or 'false'
    if(data) {
        console.log('okay');
    }
});