imgの画像が取得できなかった場合に別の画像を表示する
imgの画像が取得できなかった場合に別の画像を表示するのはonerrorを使うといいらしい、というのはWebで散見できました。
このときonerrorで指定する画像がさらに取得できなかった場合は永久ループするので、ループしないように仕込む必要があるとのこと。
これについてもonerrorの処理を一回だけにするような解決方法があるようなのですが、
昨今のほとんどのクライアント環境でHTML5が使えるのならこの別の画像自体をCanvasで作ったほうがいいんじゃないかと思って試作。
imgである必要さえないのでは?とも思いましたがHTMLやCSSの構成上画像のほうが都合がいいこともある(はず?)
Canvasを用意
function createCanvas() { var canvas = document.createElement('canvas'); canvas.width = 150; canvas.height = 150; var context = canvas.getContext( "2d" ) ; var text = 'Not Found'; context.textAlign="center"; context.fillText(text,75,75); context.rect(0,0,150,150); context.stroke(); return canvas; }
imgで指定された画像が取得できない(onerrorが発生)場合の処理
document.addEventListener('DOMContentLoaded', function() { var elements = document.querySelectorAll('img'); for (var i=0; i<elements.length; i++) { elements[i].addEventListener('error', function() { var canvas = createCanvas(); this.src = canvas.toDataURL(); }); } });
imgで指定された画像が取得できない(onerrorが発生)場合の処理(jquery版)
$(function(){ $('img').error(function(){ var canvas = createCanvas(); $(this).attr('src', canvas.toDataURL()); }); });