隱藏無法加載的圖像

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

如果文檔開頭的圖像沒有加載，並且在文檔准備就緒時附加了事件處理程序，某些瀏覽器可能無法觸發該處理程序 - 您應該在目標平台上測試它，這是非常可行的。

Answer 2

如何確定圖像的加載或網絡的狀態。

一種方法可以是維護引用DOM中的所有圖像並綁定在圖像加載完成時觸發的onload事件。 在指定的時間之后，可以認為任何未發射的圖像都是有問題的。

如何隱藏/屏蔽未能加載的圖像，使得用戶無法檢測到圖像丟失。

你已經提到了一些選擇。 您是否考慮過從DOM中刪除該元素？ 客戶端將不再無法加載圖像。

何時執行這些任務（例如文檔/窗口何時完成加載？）

您不能使用document或window onload事件，因為在DOM上的所有內容都加載之前不會觸發。 檢查DOM的准備情況因瀏覽器而異（幸運的是，你只需處理一個！）。 這可能會讓你開始 。

Answer 3

有趣的問題。

在Firefox中查看，如果圖像沒有加載，它的naturalHeight（和寬度也是）你可能會在android中使用一些javascript來讀取類似的屬性。 我在Firebug中的測試腳本很簡單：

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

Answer 4

如果您的圖像不是要使用的內容而不是文本或補充文本，那么它們應該是CSS背景圖像。 背景圖像是完全被動的，如果無法檢索或處理，則根本不顯示。