Question

关键是我将拥有众多这些inlinediv div。每个内部都有2个div，一个用于保存图像，另一个用于保存链接。这些是从另一个站点上的子站点列表动态生成的。

我想要它做的是检查每个div inlinediv。获取div iconLinkText中链接的内部文本，并在站点中搜索具有该名称的文件。（http://www.mojopin.co.uk/images/用于此测试。）如果存在，则将图像src更改为它。

我可能采取了绝对错误的路线，但我似乎无法让它发挥作用。测试时甚至找不到inlinediv div！说它是空的。

我对jQuery很新，但有没有人有任何建议？（我甚至不知道我是否已经解释得很好！）

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/

Answer 2

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

Answer 3

仅使用jQuery无法解决此问题：Same Origin Policy不允许您向第三个网站发出请求。

最简单的解决方案是在服务器上实现代理外部网站请求的服务。

基本上，如果您的网站在

http://www.foo.bar

然后你创建

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

您可以使用您需要的网址进行查询

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

Answer 4

这是一种基于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);

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

4 个答案: