SQLの窓

2016年11月23日

jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する

元々は、ブラウザ側で画像の存在チェックをして、存在したものだけを表示するという処理を考えてる時に最初に思いついた内容なんですが、画像をロードする時間があるので、全ての画像を表示し終わってから非表示にするというのは、かなり無理があったわけです。



画像ファイルが存在した時のみ、表示する jQuery の記述

なので、ロード後のページのチェックならば妥当性があると思い、以下のようなコードを作成しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var img = [
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/script.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/jquery.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
];
$(function(){

	// ページ内の画像のリンク切れを探す
	$("#action").on( "click", function(){

		// 全ての画像
		$("img").each(function(){
			// ロードイベントが起きておらず、値が 0 のようです。
			// ※ 正常な画像もロード前は 0 です
			if( $(this).get(0).naturalWidth == 0 ) {

				// 動的テーブルコンテンツ作成
				var table = $("#result");
				// 行
				var row = $("<tr></tr>").appendTo( table );
				// 列
				var column = $("<td></td>").appendTo( row );
				// URL
				column.text($(this).attr("src"));
			}
		});
	});

	// 動的テーブルコンテンツ作成
	var table = $("#target");
	for( i = 0; i < img.length; i++ ){
		// 行
		var row = $("<tr></tr>").appendTo( table );
		// 列
		var column = $("<td></td>").appendTo( row );
		// 画像
		var iamge = $("<img>").appendTo( column );
		// URL
		iamge.attr("src", img[i] );
	}

});
</script>

<table id="target">
</table>
<input id="action" type="button" value="action">
<table id="result">
</table>



要するに、naturalWidth のメモ書きなんですが、それだけじゃショぼいので、一応でっかい画像を使って直後にチェックしたのでは間に合わないという事を試したわけです( naturalWidth は 0 でした )

テーブルを動的に作るサンプルコードでもありますし、ホント jQuery って便利ですわ。


▼ 実際にやってみる

ま、結局ブックマークレットにしないと意味無いので年末までには作成しよう。



タグ:jquery
【jQueryの最新記事】
posted by at 2016-11-23 18:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX