jQuery: 检查图片是否存在

Question

我通过jQuery $.ajax加载图像路径，在显示图像之前，我想检查它是否存在。我可以使用图像的load/ready事件或类似的方法来确定文件路径是否有效吗？

由于.myimage设置为display:none，我希望做一些类似以下的事情：

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

有没有类似的东西是可能的？

- Marko

---

这可能会有所帮助 http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06 - Hari

Answer 1

好的，你可以绑定.error()处理程序...

更新: 在jQuery 3.0及更高版本中：

$(".myimage").on("error", function() {
    $(this).hide();
});

注意：.error()在jQuery 1.8中已被弃用，且在3.0中已被移除，但在旧版本中仍可使用以下方法：

$(".myimage").error(function(){
  $(this).hide();
});

嗯，你的代码已经可以使用load事件了。

$(".myimage").load(function() {
    $(this).show();
});

问题在于如果禁用了JavaScript，图片将永远不会显示...

- Reigel Gallarde

---

哦，真的吗？我没想到可以使用load方法，我只是把它发布为我尝试做的一个例子。而且我不担心JavaScript被禁用，因为我一开始就使用$.ajax.. :) +1 - Marko

请解释一下为什么要点踩。如果您有建议，这个回答可以得到改进... - Reigel Gallarde

这在Internet Explorer 9中似乎只间歇性地工作（我还没有测试其他ie版本）。我正在使用多个$(document).ready函数，但在其他浏览器中似乎毫无问题，并且不会抛出任何错误。您可以在此处查看 - 如果服务器上不存在封面，则意味着已将其删除，然后显示删除的封面信息。 http://fordummiescovers.com/share.php?id=100JS功能：http://fordummiescovers.com/js/covercheck.js - BWelfel

Answer 2

尝试:

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
}

那么使用

if(urlExists('urlToImgOrAnything') == 200) {
    // success
}
else {
    // error
}

- Aamir Afridi

---

这会导致以下警告："由于对最终用户体验的不利影响，主线程上的同步XMLHttpRequest已被弃用。" - sanchez

Answer 3

虽然这是一篇旧帖，但我认为它可以改进。我注意到原帖的问题是间歇性的，可能是由于同时加载图像和错误检查导致的。最好先让图像加载，然后再检查错误：

$(".myimage").attr("src", imagePath).error(function() {
    // do something
});

- superjaz1

Answer 4

既然您已经在进行AJAX请求，我建议将这个任务转移到支持您的AJAX的服务器端应用程序上。从服务器端检查文件是否存在非常简单，您可以在发送回来的数据中设置变量以指定结果。

- Jeffrey Blake

---

-1 OP 正在使用的 .load() 不是一个 ajax.... 参考链接：http://api.jquery.com/load-event/ - Reigel Gallarde

这是一个不错的答案，也是一个可能的替代方案，但我的问题是我是否可以特别使用jQuery进行检查..虽然服务器方法值得一试。 - Marko

我曾经很苛刻地评判过，+1...但是现在我不会给你-1了，因为你可以在客户端检查它。 - Reigel Gallarde

@Reigel：OP在描述他的过程时特别提到了他使用AJAX来获取数据。此外，任何检查文件是否存在的方法都必须发送另一个请求到服务器 - 你要么在服务器端执行一次，要么在客户端额外进行工作，以便仍然与服务器进行交互。 - Jeffrey Blake

为了澄清上述内容，您永远不仅仅是在客户端检查文件。任何执行此操作的代码都将向服务器发送至少一个，可能是多个附加请求。因此，最好在与服务器的原始交互中将信息发送回来。 - Jeffrey Blake

Answer 5

这个问题已经有几年了，但是对于任何正在查看此内容的人来说，这里有一个更好的错误处理程序使用示例。

$("img")
  .error(function(){
    $(this).hide();
  })
  .attr("src", "image.png");

为了捕获事件，您需要在尝试加载图像之前附加错误处理程序。

来源：http://api.jquery.com/error/

- Chris

Answer 6

这是我自己做的：

$.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
    }
});

- ruel