圖片發佈限制圖片的最佳做法

在我的使用案例中，我必須將圖片發佈到網站。但是，圖像可能會在一段時間內受到限制。在此期間顯示損壞圖像的最佳做法是什麼？圖片發佈限制圖片的最佳做法

我迄今爲止的做法：

使用的onerror和<img>標籤的onload事件處理程序提到here
使用placehold.it到PLACEHOLD所有破碎的形象

我將是任何指導方針非常感謝/意見/最佳做法。另外，我如何優雅地回退遺留系統，但我沒有選擇處理<img>元素上的事件。圖像已具有屬性，因此可以跳過這些行上的準則。

2013-03-31 gashu

你用jQuery標記了這個，所以我認爲這是一個選項。

最簡單的解決方案確實是檢測到錯誤，並在這種情況下更換圖像：

$('img.myChangingImageClass').error(function(){ 
     $(this).attr('src', 'notavailableYet.png'); 
});

很簡單，直接，並適用於所有現代瀏覽器。

Matt建議使用事件委託，如果您稍後可能添加圖像，這很有用。此外，它爲整個頁面附加一個事件，而不是每個圖像的事件。這是可以做到的方式如下：

$(document).on('error', 'img.myChangingImageClass', function() { 
    $(this).attr('src', 'notavailableYet.png'); 
});

既然你已經有一個「ALT」屬性沒關係的不能顯示圖像系統和搜索引擎優化。如果您希望可以使用placehold.it作爲替換圖像，但我認爲不需要（取決於您的用例）。你甚至可以用.hide()的形象或玩。

來源

2013-03-31 13:08:23

FWIW，這裏使用事件委託可能會更好，而不是直接附加到元素。主要好處是你可以立即綁定處理程序（例如，綁定到'document'），這意味着在你有機會附加處理程序之前，你將不會有任何'error'事件被觸發的機會。其次，每個頁面只附加一個處理程序，而不是每個元素。 '$（document）.on（'error'，'img.myChangingImageClass'，function（）{/ * Handler你已經有* /;}）;' – Matt

Hi Benzamin。然而，我也在思考同樣的問題，即使是短而脆的，我也無法驗證它是否是最佳做法。例如，考慮一個使用webapp的客戶啓動一個活動，並且該頁面上的所有圖像都可以使用，比如說從今天開始的兩天內？所以，大多數圖像將是'notAvailableYet'。不太確定，但如果你能指出我的一些指導方針/設計模式，我將非常感激。 – gashu

感謝@Matt有趣的建議，我編輯了 –

圖片發佈限制圖片的最佳做法

回答

相關問題