jQueryで画像ファイルが存在しない場合にその要素(imgタグ)を非表示・削除してみる



jQueryのerrorを使って画像ファイルが存在しない場合、
該当のimgタグ(要素)自体を削除(非表示)にしてみます。

1.JavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('img').error(function() {
		//ファイルが存在しない画像はimgタグ自体を削除
        $(this).remove();
    });
});
</script>

2.HTMLの記述例

    <div align="center">
    <img src="i1.jpg" alt="" width="300" height="300" /><br>
    <img src="i2.jpg" alt="" width="300" height="300" /><br>
    <img src="i3.jpg" alt="" width="300" height="300" /><br>
    <img src="i4.jpg" alt="" width="300" height="300" /><br>
    <img src="i5.jpg" alt="" width="300" height="300" /><br>
    </div>

画像ファイルが存在しない場合にその要素(imgタグ)自体を削除するデモ

phpのfile_exists的な感じをjQueryで出来るんですね。
ブラウザでJavaScritpをデバックした時にファイルが「見つかりません」的な
アラートは出ないんでしょうか。