[JavaScript] WEBページ内のリンク切れ画像をコントロールするサンプル

2015年4月19日

Javascript プログラミング

WEBページを作ったときにImageタグの画像がリンク切れで、[x]マークが表示されているページは、とても見苦しいものです。 そこで、ページ内の画像リンク切れを判定して、imgタグのstyleを変更する処理を自動で行うツールを作ってみました。

概要

・ページ内にscriptタグを記述する ・HEADタグ内、BODYタグ内、どちらに記述しても動作するように、自動判定機能を設ける ・IMGタグのonerrorだけだと、読み込み後の時にイベント発動しないので、conplete判定を入れて、naturalサイズで元画像のサイズを取得し、縦、横共に0の場合は、リンクエラーとして判定する。 ・スタイル設定を冒頭にまとめることで、サイト内で個別にstyle設定が変更できるようにする。

ソースコード

/** * IMG画像リンク切れチェッカー */ (function(){var $$={}; //リンク切れのImgタグの入れ替えをする場合のstyle設定 $$.imgStyle={ "width":"100px", "height":"100px", "border":"2px dotted #CCC", "background-color":"transparent" }; //ページ内のIMGタグをチェック $$.checkImages=function(){ var images = document.getElementsByTagName("img"); for(var i=0;i<images.length;i++){ //読み込みチェック //読み込み済み if(images[i].complete){ //元サイズが0の場合は、画像無し判定 if(!images[i].naturalWidth && !images[i].naturalHeight){ $$.setError({target:images[i]}); } } //読み込み前 else{ images[i].onerror = $$.setError; } } }; //imageタグのsrc=urlがリンク切れの時に、表示を切り替え $$.setError=function(evt){ evt.target.onerror=null; evt.target.src = ""; $$.setStyle(evt.target); }; //styleの調整 $$.setStyle=function(elm){ for(var i in $$.imgStyle){ elm.style.setProperty(i,$$.imgStyle[i],""); } }; $$.addEvent = function(t, m, f){ //other Browser if (t.addEventListener){t.addEventListener(m, f, false);} //IE else{ if(m=='load'){ var d = document.body; if(typeof(d)!='undefined'){d = window;} if((typeof(onload)!='undefined' && typeof(d.onload)!='undefined' && onload == d.onload) || typeof(eval(onload))=='object') {t.attachEvent('on' + m, function() { f.call(t , window.event); });} else{f.call(t, window.event);} } else{t.attachEvent('on' + m, function() { f.call(t , window.event); });} } }; $$.addEvent(window,"load",$$.checkImages); return window.$$checkImage = $$; })();

使い方

対象のWEBページにSCRIPTタグを作成し、上記コードを挿入するだけで、ページ読み込み後に、IMGタグのチェックを行い、見た目でx表示を回避してくれます。 上記ソースコードをjsファイルにして、scriptタグのsrc属性で読み込むやり方でも、動作します。

注意点

chromeブラウザでしかチェックしていないんですが、IEの旧バージョンではsetPropertyが正常動作しないため、うまく動かないと思います。 あと、complete判定とnaturalサイズ機能は動作しないブラウザもあるかもしれないので、各種のブラウザ検証は必要かもしれません。

今後の改修ポイント

上記注意点での、他ブラウザ問題点について、カバー率を向上させる必要がある。 IMGタグのスタイル変更ではなく、DIVタグなどに変換して、中に文字を入れたり装飾できるようにすると、ページデザインでかなり柔軟に使えるようになると思う。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。