Javascript 在网页（HTML）上实现监控功能

我有一个带有图片的HTML网站，这些图片是指向一些外部网站的链接。我的任务是显示外部网站是否关闭。也就是说，如果网站可以ping，我会显示一个代表该网站的徽标。如果网站已关闭，无法ping，我会显示带有红十字的徽标

---

这可以实现吗？

以下方法可行：

<img id="image" src="http://externalsite.com/foo.png">

const image = document.getElementById('image');
let loaded = false;

function swapImage() { image.src = '/not-available-image.png'; }

image.addEventListener('load', () => loaded = true);

setTimeout(() => {
  if (!loaded) swapImage();
  }
}, 3000);

const image=document.getElementById（'image'）；
设loaded=false；
函数swapImage（）{image.src='/notavailable image.png'；}
image.addEventListener（'load'，（）=>loaded=true）；
设置超时（（）=>{
如果（！加载）swapImage（）；
}
}, 3000);

---

这将在

load

事件上设置一个事件侦听器，并在触发时将

load

变量设置为true。然后，它还设置了一个三秒计时器，当它触发时，如果图像还没有加载，它会将其切换到您不可用的图像。这种方法的唯一问题是，在原始图像检索失败和计时器过期之间的过渡期间，您将看到“断开图像”图标。

我认为不可能实现它

当你想“ping”一个网站时，你会向它发送ajax请求

如果URL是公共web API，那么它就可以工作。

---

但是如果没有，您将遇到跨源问题。

您能提供一些您迄今为止编写的代码吗？这相当简单：您可以尝试使用AJAX获取页面。成功的时候，做A件事，失败的时候做B件事。这个网站是为了解决现有代码的问题，所以请在你自己第一次尝试后再回来。看看这个：重复@JonathanWeber鉴于CORS的限制，他们如何获取页面？感谢您的输入。经过几次尝试，我完成了我想要的，在你的逻辑中得到了灵感：）。我结束了使用OneError事件。