Javascript - onerror事件在firefox中不起作用

Question

<img style="" src="" onerror='this.style.visibility = "hidden"' /> 

這個非常簡單的onerror事件處理程序隱藏圖像，如果它找不到。

它在Chrome中按預期工作，但在Firefox中，它什麼都不做。

這是一個jsFiddle，您可以嘗試在Chrome和Firefox中運行，以查看它的行動。

http://jsfiddle.net/y9e88ack/

爲什麼火狐不能正常工作？

任何幫助，將不勝感激

Answer 1

我不知道瀏覽器之間的內部推理，但Firefox會很高興地火onerror回調提供了一種無效，非空屬性時。例如：

<img style="" src="asdf.jpg" onerror='this.style.visibility = "hidden"' /> 

DEMO：http://jsfiddle.net/18ga9hh8/

在這兩種瀏覽器，當有一個空src屬性，也沒有到服務器（與開發工具選項卡網絡觀看）提出請求。

當提供無效的非空src時，發出請求並且兩者都收到404響應，觸發onerror回調（預期）。

正如您所指出的那樣，使用值"?"會在兩個瀏覽器上強制您的期望行爲。它所做的是提出請求（可以是當前頁面的URL或當前頁面的目錄，因爲它被認爲是相對路徑 - 取決於瀏覽器設計的目的），但無法將其作爲圖像應用（它是一個HTML響應），導致錯誤。

如果你想知道或護理時，HTML5 spec說，這對src屬性：

src屬性必須存在，而且必須包含一個有效的非空URL用空格引用非潛在包圍 - 交互式，可選動畫，圖像資源既不是分頁也不是腳本。

如果你看得更遠一點兒頁面向下到列表當用戶代理是更新img元素的圖像數據，則必須執行下列步驟，＃10表示如下：

如果選定的源爲空，則將該元素設置爲斷開狀態，對任務進行排隊以在img元素上觸發一個名爲error的簡單事件，然後中止這些步驟。

所以它看起來像Firefox不遵守規範，但也許我解釋它錯了？

使用W3C驗證程序，一個空的src屬性會導致驗證錯誤，而使用值"?"是有效的（請記住整個相對路徑的事情？）。請注意，添加查詢字符串（?應該這樣做）應該會導致瀏覽器永遠不會緩存圖像，所以如果需要，我不認爲使用此方法可以實現緩存實際圖像。