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)" />

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

如何应用它们。

当我在文档的最后添加它（在＆lt; / body＆gt;之前）时，这在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);
    }
}

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

Answer 2

如何确定的负载图像或状态网络

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

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

你已经提到了一些选择。您是否考虑过从DOM中删除该元素？客户将不再无法加载图片。

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

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

Answer 3

有趣的问题。

在Firefox中查看，如果图像没有加载，它的naturalHeight（和宽度也是）你可以在android中使用一些javascript来读取类似的属性。我在Firebug中的测试脚本只是：

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

Answer 4

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

隐藏无法加载的图像

4 个答案: