Question

我正在尝试为图像编写onerror处理程序，用加载图像替换它们，然后定期尝试重新加载它们。我遇到的问题是，如果加载图像无法加载，它将进入无限循环的失败。我试图通过检查URL是否是加载图像来处理这个问题：

if(photo.src != loadingImage) {
    // Try to reload the image
}

不幸的是，loadingImage可以是相对网址（/images/loadingImage.jpg），但photo.src始终是完整网址（http://example.com/images/loadingImage.jpg）。有没有办法生成这个完整的URL而不传递函数更多的信息？显然我可以传递它的主机名，或者需要完整的URL，但是我想让这个功能的界面尽可能简单。

编辑：

基本上我想要的是保证如果我做photo.src = loadingImage，那将是真的：photo.src === loadingImage。约束是我对loadingImage一无所知，只是它是一个有效的URL（它可以是绝对的，相对于服务器，或相对于当前页面）。 photo.src可以是任何（绝对）网址，因此不一定与loadingImage位于同一个域中。

Answer 1

这个怎么样？照片应该是完整的URL或相对于当前文档。

var url;
// There probably other conditions to add here to make this bullet proof
if (photo.src.indexOf("http://") == 0 || 
    photo.src.indexOf("https://") == 0 || 
    photo.src.indexOf("//") == 0) {
  url = photo.src;
} else {
  url = location.href.substring(0, location.href.lastIndexOf('/')) + "/" + photo.src;
}

Answer 2

以下是人们在javascript中使用相对URL转换为绝对URL的几种方法：

StackOverflow - Getting an absolute URL from a relative one

Debuggable.com - Relative URLs in Javascript

或者，您是否考虑过相反的做法 - 将绝对URL转换为相对URL？如果loadingimage始终包含URL的整个路径部分，那么这样的内容可能会起作用：

var relativePhotoSrc = photo.src;
if (relativePhotoSrc.indexOf("/") > 0 && relativePhotoSrc.indexOf("http://") == 0) {
    relativePhotoSrc = relativePhotoSrc.replace("http://", "");
    relativePhotoSrc = relativePhotoSrc.substring(relativePhotoSrc.indexOf("/"), relativePhotoSrc.length);
}
alert(relativePhotoSrc);
if (relativePhotoSrc != loadingImage && photo.src != loadingImage) {
    // Try to reload the image
}

使用正则表达式进行字符串操作可能会稍微有效/可靠，但这似乎可以在我的测试中完成工作。

Answer 3

检查它们是否以相同的字符串结尾：

var u1 = '/images/loadingImage.jpg';
var u2 = 'http://example.com/images/loadingImage.jpg'

var len = Math.min(u1.length, u2.length);
var eq = u1.substring(u1.length - len) == u2.substring(u2.length - len);

将部分URL展开为完整（如image.src中）

3 个答案: