我有一个带有图片的 HTML 网站，这些图片是一些外部网站的链接。我的任务是显示外部网站是否关闭。也就是说，如果网站可以 ping，我会显示一个代表该网站的徽标。如果网站出现故障，无法 ping，我会显示带有红色叉号的徽标。
这可以实现吗？
【问题讨论】：
标签： javascript html monitoring
以下方法可行：
<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);
这会在load 事件上设置一个事件侦听器，并在它触发时将loaded 变量设置为true。然后它还会设置一个三秒计时器，当它触发时，如果图像尚未加载，它会将其交换为您不可用的图像。这种方法的唯一问题是，在原始图像检索失败和计时器到期之间的过渡期间，您会看到“损坏的图像”图标。
【讨论】：
我认为不可能实现它。
当你想“ping”一个网站时，你会向它发送 ajax 请求。
如果 URL 是公共 Web API，它可以工作。 但如果没有，您将遇到跨源问题。
【讨论】：