jQuery：检查图像是不是存在

Posted 2023-02-23

【中文标题】jQuery：检查图像是不是存在

【英文标题】：jQuery: Check if image existsjQuery：检查图像是否存在

【发布时间】：2011-03-20 15:37:28

【问题描述】：

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

将 .myimage 设置为显示：无，我希望做类似的事情

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

这样的事情可能吗？

【问题讨论】：

这可能对ambitionlab.com/…有帮助

【参考方案1】：

由于您已经在执行 AJAX 请求，我会将其卸载到支持您的 AJAX 的服务器端应用程序。检查服务器是否存在文件很简单，您可以在发送回的数据中设置变量以指定结果。

【讨论】：

-1 OP 使用的.load() 不是ajax .... api.jquery.com/load-event

这是一个不错的答案和一个可能的替代方案，但我的问题是我是否可以专门检查 jQuery.. +1 用于服务器方法。

我是这么判断的，.. +1... 但是我不会拿我的 -1 因为你可以在客户端检查它....

@Reigel：OP 在描述他的过程时特别提到他首先使用 AJAX 来获取他的数据。此外，任何检查文件是否存在的方法无论如何都必须向服务器发送另一个请求 - 您要么在服务器端执行一次，要么您正在做额外的客户端工作，只是为了仍然有交互由于您所做的任何事情而与服务器发生冲突。

为了澄清上述内容，您永远不会只是在客户端检查文件。任何这样做的代码都会向服务器发送至少一个，可能还有许多额外的请求。因此，最好在与服务器的原始交互中将信息发回。

【参考方案2】：

嗯，你可以绑定.error()handler...

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

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

注意：.error() 在 jQuery 1.8 中已弃用并在 3.0 中被删除，但在旧版本中您可以：

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

好吧，load-event你的已经没问题了

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

问题是如果禁用了 javascript，图像将永远不会显示...

【讨论】：

哦，真的吗？我不认为可以使用 load 方法，我只是将其发布为我正在尝试做的示例。此外，我不担心 Javascript 被禁用，因为我使用 $.ajax 开头.. :) +1

请解释为什么投反对票。所以如果你有什么东西可以改进这个答案......

这似乎只能在 Internet Explorer 9 中间歇性地工作。（我还没有测试过其他 ie 版本）。我正在使用多个 $(document).ready 函数，但它似乎在其他浏览器中运行顺利，并且没有抛出任何错误。你可以在这里看到 - 如果服务器上不存在封面，则表示它已被移除，然后显示封面移除信息。 fordummiescovers.com/share.php?id=100JS 功能：fordummiescovers.com/js/covercheck.js

【参考方案3】：

我知道一个旧线程，但我认为它可以改进。我注意到 OP 存在间歇性问题，这可能是由于同时加载图像和错误检查所致。最好让图片先加载，然后检查错误：

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

【参考方案4】：

试试：

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

【讨论】：

这会导致以下警告：“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。”

【参考方案5】：

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

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

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

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

【参考方案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
    
);