html - 画像で LazyLoad と onerror を連携させることができません

Question

私のページにはいくつかの画像があります：

<img src="http://www.abc/images/abc.jpg" />

画像を読み込めない場合 (abc.jpgたとえば、存在しないため)、代わりに「デフォルト」の画像を表示します。

<img src="http://www.abc/images/abc.jpg" onerror="this.src='http://www.abc/images/default.jpg'" /> 

イメージにLazyLoadを追加して、さらに軽量なデフォルト イメージをロードすると、次のようになります。

<img
    class="lazy"
    data-original="http://www.abc/images/abc.jpg"  
    src="http://www.abc/images/graydefault.jpg"
    onerror="this.src='http://www.abc/images/default.jpg'" /> 

これで、ページが読み込まれると、実際の画像が読み込まれる前に、最初に軽量の画像が読み込まれます。

しかし、実際の画像が存在しない場合はどうなるでしょうか? 軽量のデフォルトの画像はそこに残りますが、それは私が望むものではありません:

default.jpgエラー時にデフォルトのイメージ ( ) を読み込むにはどうすればよいですか?

PS: デフォルトの画像はかなり重いので、デフォルトの画像としてロードすることは避けたいと思います。