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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページを作ったときにImageタグの画像がリンク切れで、[x]マークが表示されているページは、とても見苦しいものです。

そこで、ページ内の画像リンク切れを判定して、imgタグのstyleを変更する処理を自動で行うツールを作ってみました。

概要

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

ソースコード

使い方

対象のWEBページにSCRIPTタグを作成し、上記コードを挿入するだけで、ページ読み込み後に、IMGタグのチェックを行い、見た目でx表示を回避してくれます。

上記ソースコードをjsファイルにして、scriptタグのsrc属性で読み込むやり方でも、動作します。

注意点

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

今後の改修ポイント

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です