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

Question

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

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

很遗憾，loadingImage 可以是相对 URL (/images/loadingImage.jpg)，但 photo.src 始终是完整 URL (http://example.com/images/loadingImage.jpg)。有没有办法在不向函数传递更多信息的情况下生成这个完整的 URL？显然我可以将主机名传递给它，或者需要完整的 URL，但我希望让这个函数的界面尽可能简单。

编辑：

基本上我想要保证如果我这样做photo.src = loadingImage，这将是真的：photo.src === loadingImage。限制是我对loadingImage 一无所知，除了它是一个有效的 URL（它可以是绝对的、相对于服务器或相对于当前页面）。 photo.src 可以是任何（绝对）URL，因此不一定与 loadingImage 在同一个域中。

Answer 1

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

• StackOverflow - Getting an absolute URL from a relative one
• Debuggable.com - Javascript 中的相对 URL

或者，您是否考虑过相反的做法 - 将绝对 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 2

这个怎么样？照片应该是完整的 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 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);