隐藏加载失败的图片

Posted 2023-05-07

【中文标题】隐藏加载失败的图片

【英文标题】：Hiding images that failed to load

【发布时间】：2010-12-11 02:15:58

【问题描述】：

我有一个 android 应用程序，它生成一些在本地呈现的 html，在 Webkit 视图中。

HTML 生成的细节并不那么重要，除了：

大部分来自一个地方，我无法更改 围绕该 HTML（包括页眉、页脚、HEAD 等）、CSS 和 javascript 的模板由我控制。 大多数图像都在我的控制之下，并且与不可触碰的 HTML 分开呈现。这些图像来自本地磁盘，不需要网络。可以假设这些图像始终可用。 不可触摸的 HTML 包含理想情况下可以显示的图像。如果网络不可用，则这些图像将无法加载。 完整的 HTML 文件很可能在呈现之前很久就被存储到磁盘上。即，我们无法根据网络可用性呈现不同的 HTML。

该应用可能至少在某些时候处于离线状态，因此我希望处理图像无法加载的情况。

有问题的图像主要是 1x1 跟踪图像，但可能包含在可用时应该可见的图像。

如果不调用 JQuery 或外部库，您对我的攻击计划有何建议？

我对如何做到这一点有一些想法，但意识到它们有很多需要担心的陷阱：

使用 CSS 选择器，选择所有尚未加载的图像（有这样的选择器吗？）并使用display:none;。 使用 Javascript，将每个图像上的 alt 属性设置为空字符串。这需要在document.onLoad 上完成？ 检查网络的可用性，然后使用 CSS 隐藏所有带有@href~=^http 的图像。我不确定如何/何时应用这种风格。

如果有帮助，对于这个问题，我似乎有以下子问题。目前尚不清楚其中任何一个的最佳策略：

如何确定图像的加载状态或网络状态。 如何隐藏/屏蔽加载失败的图像，以使用户无法检测到图像丢失。 何时执行这些任务（例如，当文档/窗口完成加载时？） 如何应用它们。

我们将不胜感激地收到任何想法、代码和建议。

【参考方案1】：

如何确定图像的加载状态或网络状态。 如何隐藏/屏蔽加载失败的图像，以使用户无法检测到图像丢失

您可以查看图片加载失败时触发的 onerror 事件：

<img src="image.png"  onerror="this.parentNode.removeChild(this)" />

何时执行这些任务（例如，当文档/窗口完成加载时？） 如何应用它们。

当我将它添加到文档的最后（在

【参考方案2】：

有趣的问题。

在 Firefox 中，如果图像没有加载，它的 naturalHeight（和宽度也是）为 0。您可能会在 android 中使用一些 javascript 来读取类似的属性。我在 Firebug 中的测试脚本很简单：

document.getElementsByTagName('img')[0].naturalHeight

【参考方案3】：

如何确定 图像或状态 网络。

一种方法可能是维护 DOM 中的所有图像的引用，并绑定一个在图像完成加载时触发的 onload 事件。在指定的时间后，任何未触发的图像都可以被认为是有问题的。

如何隐藏/屏蔽加载失败 图像，使其无法检测到 图像丢失的用户。

您已经提到了一些选项。您是否考虑过从 DOM 中完全删除该元素？客户端将不再尝试加载图像。

何时执行这些任务（例如，何时 文档/窗口已完成 加载？）

您不能使用 document 或 window onload 事件，因为在加载 DOM 上的所有内容之前不会触发。检查 DOM 的准备情况因浏览器而异（幸运的是您只处理一个！）。 This might get you started.

【参考方案4】：

如果您的图片不是用于替代文本或补充文本的内容，那么它们应该是 CSS 背景图片。背景图像是完全被动的，如果无法检索或处理，则根本不会显示。