隐藏无法加载的图像

Question

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

除了以下内容之外,HTML生成的细节并不是那么重要:

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

该应用程序可能至少在某些时候处于脱机状态,因此我希望处理无法加载图像的情况.

所讨论的图像主要是1x1跟踪图像,但可能包括在可用时应该可见的图像.

如果不调用JQuery或外部库,您会建议我的攻击计划是什么？

我有关于如何做到这一点的想法,但意识到他们有许多陷阱需要担心:

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

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

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

我们将非常感激地提出任何想法,代码和建议.

Answer 1

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

您可以查看图像无法加载时触发的onerror事件:

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

• 何时执行这些任务(例如文档/窗口何时完成加载？)
• 如何应用它们.

当我在文档的最后添加它(在</ body>之前)时,这在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);
    }
}

如果文档开头的图像没有加载,并且在文档准备就绪时附加了事件处理程序,某些浏览器可能无法触发该处理程序 - 您应该在目标平台上测试它,这是非常可行的.