使用JavaScript检查服务器上是否存在图像？
使用JavaScript有一种方法可以告诉服务器上是否有资源可用？ 例如我有图像1.jpg – 5.jpg加载到HTML页面。 我想每分钟调用一次JavaScript函数，大概做下面的scratch代码…
if "..http://img.dovov.com6.jpg" exists: var nImg = document.createElement("img6"); nImg.src = "..http://img.dovov.com6.jpg"; 思考？ 谢谢！
你可以使用像这样的东西：
function imageExists(image_url){ var http = new XMLHttpRequest(); http.open('HEAD', image_url, false); http.send(); return http.status != 404; }
很明显，你可以使用jQuery /类似的来执行你的HTTP请求。
$.get(image_url) .done(function() { // Do something now you know the image exists. }).fail(function() { // Image doesn't exist - do something else. })
您可以使用图像预加载器工作的基本方式来testing图像是否存在。
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"); } );
的jsfiddle
您可以检查图像是否加载：
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 = "..http://img.dovov.com6.jpg";
如果有人来到这个页面，想要在一个基于React的客户端上做这个工作，你可以做一些类似于下面的事情，这是React团队的Ben 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} />; ); }
如果您创build一个图片标签并将其添加到DOM，它的onload或onerror事件应该会触发。 如果发生错误，则服务器上不存在映像。
你可以调用这个JS函数来检查服务器上是否存在文件：
function doesFileExist(urlToFile) { var xhr = new XMLHttpRequest(); xhr.open('HEAD', urlToFile, false); xhr.send(); if (xhr.status == "404") { console.log("File doesn't exist"); return false; } else { console.log("File exists"); return true; } }
$("img").on("load",function(){ alert(" Image Exists...!"); }).on("error", function(){ alert("ERROR"); });
