jquery+placehold.itで画像のリンク切れ画像を差し替える

これでもう画像のリンク切れは起こらない!

現在placehold.itは認証が必要なサービスとなっています。

jqueryのerror関数を使って、リンク切れ画像を検知し、そのimgタグのwidth,heightをとってplacehold.itでダミーの画像を作成してみた。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンク切れ検知</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $('img').error(function(){
    var height     = $(this).attr("height");
    var width      = $(this).attr("width");
    var noimageUrl = "http://placehold.it/" + height + "x" + width;
    var noimageAlt = "画像が見つかりません";
    $(this).attr({src:noimageUrl,alt:noimageAlt});
  });
});
</script>
</head>
<body>
<img src="/hogehoge.jpg" width="100" height="100" alt="画像"/>
</body>
</html>

どんなサイトでも利用できそうなのですごく汎用的に作れそう。
placehold.itはダミー画像をある程度カスタマイズできるので、サイトにあったダミーも簡単に作れる。