Javascript 隐藏未能加载的图像

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

HTML生成的细节其实并不重要，除了：

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

该应用程序可能至少有一段时间处于脱机状态，因此我希望处理图像无法加载的情况

所讨论的图像主要是1x1跟踪图像，但如果可用，可能包括应该可见的图像

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

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

• 使用CSS选择器，选择所有未加载的图像（有这样的选择器吗？），并使用

  display:none

• 使用Javascript，将每个图像上的

  alt

  属性设置为空字符串。这需要在

  文档上完成。onLoad

• 检查网络的可用性，然后使用CSS隐藏带有@href~=^http的所有图像。我不确定如何/何时应用这种风格

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

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

如果您有任何想法、代码和建议，我们将不胜感激

如何确定轴承的承载刚度 图像或图像的状态 网络

一种方法可能是维护对DOM中所有图像的引用，并绑定一个

onload

事件，该事件在图像完成加载时触发。经过一段指定的时间后，可以认为任何尚未激发的图像都有问题

如何隐藏/屏蔽未能加载的 图像，使其无法检测 由用户确认图像丢失

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

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

您不能使用

文档

或

窗口

onload

事件，因为只有在加载DOM上的所有内容后才会触发该事件。检查DOM的准备情况因浏览器而异（幸运的是，您只处理一个！）

有趣的问题

在Firefox中，如果图像未加载，其自然高度（以及宽度）为0。您可能可以在android中使用一些javascript来读取类似的属性。我在Firebug中的测试脚本很简单：

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

---

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

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

您可以查看当映像无法加载时触发的onerror事件：

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

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

在Firefox和Chrome中，当我将其添加到我的文档末尾时（之前），这对我很有效：

var-imgs=document.getElementsByTagName（'img'））
for（var i=0，j=imgs.length；这正是我想要的。谢谢。请确保为WebView激活JavaScript:myWebView.getSettings（）.setJavaScriptEnabled（true）；
var imgs = document.getElementsByTagName('img')
    for(var i=0,j=imgs.length;i<j;i++){
        imgs[i].onerror = function(e){
        this.parentNode.removeChild(this);
    }
}