移动网络：检测图像何时被禁用答案

【问题标题】：Mobile Web: Detecting when images have been disabled移动网络：检测图像何时被禁用
【发布时间】：2011-08-26 11:48:24
【问题描述】：

我遇到了一个非常烦人的移动网络问题。我拥有的网站大部分按钮都使用图像，<a href="..."><img> 和<input type='image'>。因此，如果用户禁用图像，网站不仅看起来不好，而且他们也失去了浏览网站的所有能力。特别是，Android 不会在图像上显示alt 信息，因此实际上没有任何迹象表明图像未显示。

是否有某种方法可以确定浏览器是否在不使用 JavaScript 的情况下禁用了图像？如果他们禁用它，我想显示一个更通用的文本优化网站。

【问题讨论】：

我很惊讶android在禁用图像时不会处理图像的alt属性。
我做了一些研究，我认为这是自 2005 年以来一直存在的 webkit 问题。真的很伤心。
如果您禁用了图像，它可能也会删除背景图像，对吗？我本来建议使用这些图片作为背景图片，但我不确定这是否可行。

标签： html image mobile

【解决方案1】：

根本不使用任何 JavaScript？恐怕这是不可能的，至少在客户端是不可能的。

在 HTML 中有 NOFRAME 和 NOSCRIPT 标记，但没有图像的等效标记，只有当图像被禁用或不支持时才会显示其内容。

那么对于包装图像的 A 标签，也许您可以让 A 标签代替其图像，负责显示工具提示和处理事件。

此外，为确保在图像未加载时布局不会中断，您可以为 A 标签指定其图像的正常高度和宽度。同样的事情也适用于<input type='image'> 标签，方法是将它们包装在一个 span 标签中并为其赋予正确的属性值。

例如：

<a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text">
    <img...>
</a>

<span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text">
    <input type='image'...>
</span>

【讨论】：

定义锚标签的大小效果很好。但是输入仍然需要 JavaScript。不幸的是，我想到的一种解决方案是将图像限制为启用 JavaScript 的人，那就是加载标准文本，并在加载图像时使用 JavaScript onload 将文本换成图像。最后我觉得设置anchor大小，避免图片输入类型是最好的解决方案。