画像が存在するかどうかを調べる方法

画像が存在するかどうかをJavaScriptで調べる方法。

サンプルコード

onloadとonerrorを使って、画像が読み込まれた場合と読み込まれなかった場合にそれぞれ処理を行われるようにします。

JavaScript

// 画像格納場所
var baseUrl = 'https://cly7796.net/blog/sample/how-to-find-out-whether-there-is-an-image/';

// チェックする画像
var imgArr = new Array(
	baseUrl + 'img01.jpg',
	baseUrl + 'img02.jpg',
	baseUrl + 'img03.jpg',
	baseUrl + 'img04.jpg',
	baseUrl + 'img05.jpg'
);

for (var i = 0; i < imgArr.length; i++) {
	imagecheck(imgArr[i]);
}

function imagecheck(url) {
	var newImage = new Image();

	// 画像があった時の処理
	newImage.onload = function() {
		console.log('あり' + url);
	}

	// 画像がなかった時の処理
	newImage.onerror = function() {
		console.log('なし' + url);
	}
	newImage.src = url;
}

画像が存在するかどうかを調べる方法のデモページ
　

画像がある場合のみ挿入する

上記サンプルに処理を追加して、画像がある場合のみ画像を挿入するサンプル。

HTML

<ul id="sample"></ul>

<pre class="brush: jscript; title: ; notranslate" title="">
// 画像格納場所
var baseUrl = 'https://cly7796.net/blog/sample/how-to-find-out-whether-there-is-an-image/';

// チェックする画像
var imgArr = new Array(
	baseUrl + 'img01.jpg',
	baseUrl + 'img02.jpg',
	baseUrl + 'img03.jpg',
	baseUrl + 'img04.jpg',
	baseUrl + 'img05.jpg'
);

// 画像を挿入する場所
var parent = document.getElementById('sample');
// チェックする画像の枚数
var imgMax = imgArr.length;
// 挿入する画像を格納
var insert = new Array(imgMax);
// チェックの終わった画像のカウント
var counter = 0;

for (var i = 0; i < imgMax; i++) {
	imagecheck(imgArr[i]);
}

function imagecheck(url) {
	var newImage = new Image();

	// 画像があった時の処理
	newImage.onload = function() {
		// この画像がimgArrの何番目の画像かを調べる
		var thisIndex = imgArr.indexOf(this.src);
		// 画像を包む要素(li)を生成
		var wrap = document.createElement('li');
		// 生成したliに画像を入れる
		wrap.innerHTML = '<img src="'+this.src+'" alt="" />';
		// 挿入用の配列に、imgArrと同じ順番になるように格納
		insert[thisIndex] = wrap;
		// チェック済み画像に+1
		counter += 1;
		// 画像の処理が全て終わったら画像を挿入する
		if(counter == imgMax) {
			bnrInsert();
		}
	}

	// 画像がなかった時の処理
	newImage.onerror = function() {
		// この画像がimgArrの何番目の画像かを調べる
		var thisIndex = imgArr.indexOf(this.src);
		// 画像がなかったので、insertのthisIndex番目はundefinedにしておく
		insert[thisIndex] = undefined;
		// チェック済み画像に+1
		counter += 1;
		// 画像の処理が全て終わったら画像を挿入する
		if(counter == imgMax) {
			bnrInsert();
		}
	}
	newImage.src = url;
}

// バナーをHTMLに挿入
function bnrInsert() {
	for (var i = 0; i < imgMax; i++) {
		// undefinedでない時だけ挿入する
		if(insert[i] != undefined) {
			parent.appendChild(insert[i]);
		}
	}
}

画像が存在するかどうかを調べる方法のデモページ2
　

【参考サイト】

• JavaScriptで画像のリンク切れをチェックする方法:phpspot開発日誌