我有一个Android应用程序生成一些HTML是本地渲染，在Webkit的观点。

在HTML生成的细节并不只是真的那么重要：

大部分是来自一个地方，我不能改变它 在周围的HTML模板（包括页眉，页脚，HEAD等）时，CSS和Javascript是我的控制之下。 在大多数图像是在我的控制，并从碰不得的HTML单独渲染。这些图像来自本地磁盘，并且不需要网络。它可以假设这些图像总是可用的。 贱民HTML包含了会，最好能显示的图像。如果网络是不可用的，它是这些图像，将无法加载。 完整的HTML文件很可能被藏到磁盘，它呈现很久以前。即基于网络的可用性，我们无法呈现不同的HTML。

该应用程序很可能，至少在某些时候是离线的，所以我要处理这种情况的图像无法加载的情况。

在考虑中的图像是predominantly 1x1的跟踪图像，但可能包括应该是可见的，如果他们提供的图片。

而不必调用JQuery的，或外部库，你会建议我的攻击计划？

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

使用CSS选择器中选择所有未加载的图片（会有这样的选择？），并使用显示：无; 。 使用Javascript，设置每一个图像上的 ALT 属性为空字符串。这将需要在做 document.onLoad ？ 检查网络的可用性，然后使用CSS隐藏所有图像@ HREF〜= ^ HTTP。我不知道如何/何时应用该样式。

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

如何确定加载岬图像或网络的状态。 如何隐藏/掩模中的加载失败的图像，使得其不能检测由所述图像丢失用户。 在执行这些任务时（例如，​​文档/窗口完成加载？） 如何应用它们。

任何想法，code，建议将受到欢迎。

解决方案      如何确定加载岬图像或网络的状态。   如何隐藏/掩模中的加载失败的图像，使得其不能检测由用户的图像丢失   

您可以看一下这是触发onerror事件时的图像加载失败：

 ＆LT; IMG SRC =image.pngALT =形象的onerror =this.parentNode.removeChild（本）/＆GT;
 

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

这在Firefox和Chrome工作对我来说，当我把它添加广告我的文档的末尾（前＆LT; / BODY>）：

  VAR IMGS = document.getElementsByTagName（'IMG'）
对于（VAR I = 0，J = imgs.length; I＆LT; D​​];我++）{
IMGS [I] .onerror =功能（E）{
this.parentNode.removeChild（本）;
}
}
 

这是很posiible，如果在文档的开头的图像没有加载，并且您将尤尔事件处理程序时，该文件是准备一些浏览器可能不会触发该处理程序 - 你应该你的目标平台上进行测试。

I have an Android application that generates some HTML which is rendered locally, in a Webkit view.

The details of the HTML generation aren't really that important except for:

the bulk of it comes from one place, and I cannot change it the template around that HTML (including headers, footers, HEAD etc), the CSS, and Javascript is under my control. most images are under my control, and rendered separately from the untouchable HTML. These images come from local disk, and do not require the network. It can be assumed that these images are always available. the untouchable HTML contains images which would, ideally be displayed. If the network is unavailable, it is these images that would fail to load. the complete HTML file is likely to be stashed to disk, long before it is rendered. i.e. we cannot render different HTML based on network availability.

The app is likely to be offline for at least some of the time, so I wish to handle the case where images fail to load.

The images in question are predominantly 1x1 tracking images, but may include images that should be visible if they're available.

Without invoking JQuery, or an external library, what would you advise my plan of attack?

I have thoughts on how to do this, but realise that they are many pitfalls to worry about:

with a CSS selector, select all the images that haven't loaded (is there such a selector?) and use display:none;. with Javascript, set the alt attribute on every image to the empty string. This would need to be done on document.onLoad? check the availability of the network, and then using CSS hide all images with @href~=^http. I'm not sure how/when to apply this style.

If it helps, for this problem, I seem to have the following sub-problems. It is not clear the optimal strategy for any of them:

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. when to perform these tasks (e.g. when the document/window has finished loading?) how to apply them.

Any thoughts, code, suggestions would be gratefully received.

解决方案

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

You may look at the onerror event which is triggered when an image fails to load:

<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.

This worked for me in Firefox and Chrome when I added it ad the very end of my document (before </body>):

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

It is quite posiible that if an image at the begining of your document didn't load, and you attach yor event handlers when the document is ready some browsers may not fire that handler - you should test it on your target platform.