javascript - 将部分 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 - 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
}

可能有一种更有效/更可靠的方法来使用正则表达式进行字符串操作，但这似乎在我的测试中完成了工作。