隐藏无法加载的图片 [英] Hiding images that failed to load

问题描述

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

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

HTML生成的细节并不重要，除非for：

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

• 大部分来自一个地方，我无法更改




• 大多数图片都在我的控制之下，并且与不可触及的HTML分开呈现。我们可以控制这些图片，包括HTML（包括页眉，页脚，HEAD等）这些图像来自本地磁盘，不需要网络。可以假设这些图片总是可用的。


• 不可触摸的HTML包含理想地显示的图像。如果网络不可用，则这些图像将无法加载。


• 完整的HTML文件很可能在呈现之前就已存储到磁盘。即我们无法根据网络可用性呈现不同的HTML。

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

有问题的图片主要是1x1跟踪图片，但可能包括应该可见的图片（如果可用）。

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

没有调用JQuery或外部库，你会建议我的攻击计划？

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:

• 使用CSS选择器，选择所有未加载的图像（是否有这样的选择器？ ），并使用Javascript来设置 alt

> >属性设置为空字符串。这需要在 document.onLoad ？

• 上检查网络的可用性，然后使用CSS隐藏所有图像@ href〜= ^ http。我不知道如何/何时应用此样式。

如果它有帮助，对于这个问题，我似乎有以下子问题。它不是清楚的任何他们的最佳策略：

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.

推荐答案

• 如何确定图片的加载程度或网络的状态。


• 如何隐藏/屏蔽无法加载图片，使其无法检测

您可以查看onerror事件图片无法加载：

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

• 当文档/窗口完成加载时）


• 如何应用它们。

在Firefox和Chrome中，当我在文档的最后（在< / body>之前）添加广告时，这对我有效：

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);
    }
}

这是很可能的，如果一个图像在开始的文档未加载，并且在文档准备就绪时附加yor事件处理程序，某些浏览器可能无法触发该处理程序 - 您应该在目标平台上测试它。

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.

这篇关于隐藏无法加载的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！