如果文件存在，则更改图像源

Question

我有一个http://jsfiddle.net/rcebw/3/

这个问题是我会有许多这些inlinediv div。每个内部都有两个div，一个包含图像，另一个包含链接。这些是从另一个站点的子站点列表动态生成的。

我想要做的是检查每个带有类名inlinediv 的div。获取

iconLinkText

中链接的内部文本，并在网站上搜索该名称的文件。（对于此测试，请使用http://www.mojopin.co.uk/images/）如果存在，则更改图像SRC为它。

我可能正在完全错误的路线上，但似乎无法使其正常工作。在测试时甚至找不到inlinediv div！说它是空的。

我对jQuery非常陌生，但有人有什么建议吗？（我甚至不知道自己是否解释清楚了！）

- anothershrubery

---

你现在面临的问题是你在fiddle上使用了Mootools。你需要从框架下拉菜单中选择你想要使用的jQuery版本。 - codelahoma

不知道为什么会改变。谢谢。现在我有更多的东西可以使用了！ - anothershrubery

Answer 1

您无需使用AJAX来实现此功能，因为您可以从其他域名热链接图像而不受任何限制。以下是检查图像是否存在的方法：

function checkImage(src) {
  var img = new Image();
  img.onload = function() {
    // code to set the src on success
  };
  img.onerror = function() {
    // doesn't exist or error loading
  };

  img.src = src; // fires off loading of image
}

这是一个可用的实现 http://jsfiddle.net/jeeah/

- Matt King

---

非常方便！但是会向控制台抛出“找不到资源”的错误。 - cronoklee

其他类似问题的“重复”答案对我没有像这个答案一样有效。一些基于 AJAX 的方法会在 Firefox 中导致 NS_ERROR_FAILURE 错误，但是这个方法却不会。谢谢！ - Mike_K

Answer 2

这里有一种现代的基于Promise的方式，它将返回一个带有布尔值的Promise。

function imageExists(src) {
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.onload = function () {
        resolve(true);
      }
      img.onerror = function (error) {
        resolve(false);
      }
      img.src = src;
    })
}


const imagePath = "http://www.google.com/images/logo_sm.gif";
imageExists(imagePath).then(doesExist => {
  console.log('doesImageExist', doesExist);
});
  

当然，您可以使用async/await语法来实现这一点。

const doesImageExist = await imageExists(imagePath);

- Dom

Answer 3

同源策略防止您向其他域发出AJAX请求。除非您在“http://www.mojopin.co.uk”上运行此代码，否则它将无法工作。

- Diodeus - James MacFarlane

---

啊，好的，那么检查文件是否存在的最佳方法是什么？此外，它无法找到“inlinediv”！ - anothershrubery

插入一个IMG标签并连接一个onload事件。然后将图像的SRC设置为您正在测试的图像。如果几秒钟后它没有显示出来，那么它可能不存在。 - Diodeus - James MacFarlane

我不明白，我想要的是如果图片不存在就使用默认图片，但如果存在就使用它。我已经让其余部分工作了，只需要检查是否存在。 - anothershrubery

Answer 4

只用jQuery是无法解决这个问题的：同源策略不允许你向第三方网站发送请求。

最简单的解决办法是在你的服务器上实现一个服务，将请求代理到外部网站。

基本上，如果你的网站位于

http://www.foo.bar

然后你创建

http://www.foo.bar/scheckscript.php（例如）

这样你就可以使用需要的url查询它了

http://www.foo.bar/scheckscript.php?url=http%3A//www.third.com

- Giovanni Di Milia