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タグなどに変換して、中に文字を入れたり装飾できるようにすると、ページデザインでかなり柔軟に使えるようになると思う。
0 件のコメント:
コメントを投稿