javascript - 隐藏加载失败的图片

Question

我有一个 Android 应用程序，它生成一些 HTML，这些 HTML 在本地呈现在 Webkit View 中。

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

• 它的大部分来自一个地方，我无法改变它
• 围绕 HTML(包括页眉、页脚、HEAD 等)、CSS 和 Javascript 的模板由我控制。
• 大多数图像都在我的控制之下，并且与无法触及的 HTML 分开呈现。这些图像来自本地磁盘，不需要网络。可以假定这些图像始终可用。
• 不可触摸的 HTML 包含理想情况下会显示的图像。如果网络不可用，将无法加载这些图像。
• 完整的 HTML 文件很可能在呈现之前就已存储到磁盘中。也就是说，我们无法根据网络可用性呈现不同的 HTML。

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

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

在不调用 JQuery 或外部库的情况下，您对我的攻击计划有何建议？

我想过如何做到这一点，但意识到有很多陷阱需要担心:

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

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

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

任何想法、代码、建议都将不胜感激。

Answer 1

• how to determine the loaded-ness of the images or the state of the network.
• how to hide/mask the failed to load images, such that it is not detectable by the user that the image is missing

你可以看看图片加载失败时触发的 onerror 事件:

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

• when to perform these tasks (e.g. when the document/window has finished loading?)
• how to apply them.

当我将它添加到文档的最后(在 之前)时，这在 Firefox 和 Chrome 中对我有用:

var imgs = document.getElementsByTagName('img')
    for(var i=0,j=imgs.length;i<j;i++){
        imgs[i].onerror = function(e){
        this.parentNode.removeChild(this);
    }
}

很可能如果文档开头的图像未加载，并且您在文档准备好时附加了事件处理程序，则某些浏览器可能不会触发该处理程序 - 您应该在目标平台上对其进行测试。