2

编辑：根据给出的第一个答案（我用绿色“打勾”），查看我的解决方案的这个问题的结尾。

看看这个简单的静态 html 页面：（

这些只是我使用谷歌图像搜索找到的图像，用于解释问题。如果这些图像中的任何一个受版权保护，我深表歉意。我只需要实时服务器上的图像......）

<html>
<head><title>Server Test Using Image</title>
<head>  
<body>
If the server is alive, I will be a happy browser<br>
<img src="http://getsetgames.com/wp-content/uploads/2009/12/ActivityIndicator.gif" id=spinner width=100 height=100> 
<img 
 src="http://pwhatley.files.wordpress.com/2008/06/walmartfrown.jpg" 
 width=100 height=100 
 style="display: none;" 
 id=linkBad
>
<img 
 src="http://3.bp.blogspot.com/-vpsc13PCfc0/TaLCGaq2SjI/AAAAAAAACTA/hw2MDzTk6mg/s1600/smiley-face.jpg" style="display: none;" width=100 height=100 
 onError="document.getElementById('linkBad').style.display='inline'; document.getElementById('spinner').style.display='none';"
 onLoad="this.style.display='inline'; document.getElementById('linkBad').style.display='none'; document.getElementById('spinner').style.display='none';"
>
</body>
</html>

我使用我正在处理的一个较大项目的摘录对上述示例进行了编码，该项目评估了许多服务器的在线状态。虽然此内容是动态生成的，但出于本示例的目的，您可以假设它是由浏览器加载的静态页面。（即假设在服务器后端没有办法做这些事情，因为该站点的目标是告知查看者他/她可以从该位置“访问”哪些服务器）

如果您将其剪切并粘贴到 html 页面中，您应该会短暂地看到一个活动指示器，然后您应该会看到一个笑脸。

如果您将第二个 img 对象的 src 标记编辑为不同的域名，或者您知道已失效的 IP 地址，最终活动指示器应该停止，并替换为皱眉的脸。

注意 - 在此示例中，编辑文件名将不起作用，因为为其提供服务的服务器会忽略最终路径组件，因此请编辑服务器并将其指向错误的域名或类似 127.0.0.9 的名称

活动指示器很不错，但可能仅适用于 javascript，因为它取决于第二个图像的 onLoad 或 onError 执行。所以请忽略这一点 - 我只是使用脚本标签动态插入活动指示器。为了使这个示例简单，您看到的唯一脚本是在 onLoad 和 OnError 标记中。

我想确定的是仅使用 html 来实现此结果的某种方法 - 即在 javascript 被关闭的情况下，将无法找到的图像替换为可以的图像的另一种方法，（即假设皱眉图像是安全的，因为它与链接到它的 html 页面位于同一服务器上。）

以下是我根据我勾选的答案创建的解决方案。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.serviceFails {
background-image: url('http://img185.imageshack.us/img185/1800/080508215859259007ge8.jpg');
}
.service1 {
background-image: url('http://img204.imageshack.us/img204/3783/080508190940132007ve6.jpg');
}
.service2 {
background-image: url('http://img206.imageshack.us/img206/2967/080508153147264007sp6.jpg');
}
/* ... */
-->
</style>
</head>
<body>
<table><tr><td>Service 1</td><td>
<div class="serviceFails">
<div class="service1"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
<br>    
<table><tr><td>Service 2</td><td>
<div class="serviceFails">
<div class="service2"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>    

</body>
</html>
4

1 回答 1

2

也许使用 base64 数据 URL 的背景图像技巧会起作用。这个想法是，如果您启用了 CSS，至少，一个项目可以仅通过 base64 编码数据在 CSS 中定义背景图像，然后如果用户能够点击图像（即服务在线），它将与服务器返回的图像重叠。

因此，如果服务在线，CSS 中定义的背景图像将有效地隐藏在视图之外，如果它离线则不。请注意，这应该大致像这样完成：

<div class="status_test">
  <div id="service1Overlay"></div>
</div>

在 CSS 中：

#service1Overlay { background-image: url('http://myservice.com/statuspic.png'); }
.status_test { background-image: url('<base64-data-url-goes-here>'); }
于 2011-07-31T04:28:25.673 回答