代码之家 › 专栏 › 技术社区 › jamesh

隐藏加载失败的图像

android css html javascript

jamesh · 技术社区 · 15 年前

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

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

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

这个应用程序可能至少有一段时间处于离线状态,所以我希望处理图像加载失败的情况。

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

如果不调用jquery或外部库,您会对我的攻击计划提出什么建议?

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

使用CSS选择器,选择所有未加载的图像(是否有这样的选择器?)使用 display:none; .
使用javascript,设置 alt 属性设置为空字符串。这需要在 document.onLoad ?
检查网络的可用性,然后使用css通过@href~=^http隐藏所有图像。我不知道如何/何时应用这种样式。

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

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

任何想法、代码和建议都将得到感激。

4 回复 | 直到 15 年前

pawel 15 年前

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

如何隐藏/屏蔽加载失败的图像,以便用户无法检测到图像丢失。

您可以查看当图像加载失败时触发的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);
    }
}

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

David Snabel-Caunt 15 年前

有趣的问题。

在火狐中,如果一个图像没有加载,它的自然高度(和宽度)是0。您可以在Android中使用一些JavaScript来读取类似的属性。我在Firebug中的测试脚本只是:

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

Tate Johnson 15 年前

如何确定图像或网络。

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

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

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

何时执行这些任务(例如文档/窗口已完成加载?)

您不能使用 document 或 window 重载 事件,因为在加载了DOM上的所有内容之前,不会触发该事件。检查DOM的准备情况在不同浏览器之间有所不同(幸运的是,您只处理一个!). This might get you started .

austin cheney 15 年前

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