JavaScript

.error()を使って画像リンク切れのimgタグ要素を削除remove.()する方法

複数人でサイト更新運用をやってるとたまに画像ファイルリンク切れのimgタグを見つけることがあります。
見つけた時は修正するのですが知らないところでリンク切れしてるimgタグのページはみっともないので、それを少しでも解消するべく、今回は.error()を使って画像リンク切れのimgタグ要素を削除.remove()する方法をご紹介します。

画像ファイルリンク切れしてる・リンク切れして無いimgタグを表示するCSSの記述

※以下は必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
p{
	width:500px;
	margin:0 auto;
	line-height:1.4em;
	padding-bottom:15px;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
-->
</style>

画像ファイルリンク切れしてる・リンク切れして無いimgタグを用意したHTMLの記述

※画像ファイルリンク切れしてるimgタグとリンク切れして無いimgタグを用意しました。

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

.error()を使ったJavaScriptの記述

※.ready()でページ読込後.error()を使ってimgタグがエラーの場合、そのタグ要素を.remove()してます。

<script src="https://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>

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

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

phpのfile_exists的な感じをjQueryでやってみました。
リンク切れ画像タグ要素はChromeデベロッパーツールのColsoleでもエラーメッセージが表示されます。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。