JavaScriptで指定した画像URLに画像が存在するかを判定することは可能でしょうか。
やりたいことは「画像1」と「画像2」のURLが分かっている場合に、
function getImageURL() {
/* 「画像1のURL」に画像が存在すれば「画像1のURL」を返却する */
/* 「画像2のURL」に画像が存在すれば「画像2のURL」を返却する */
/* 両方なければ''を返却する */
}
と言うことがやりたいです。
色々調べてはみたのですが、
JavaScriptでは画像の読み込み処理を非同期で行っているようで、
読み込んでいる間に、次の処理に行ってしまい、''が返却されてしまいます。
また↓のサイトを参考にpromiseを使用してやってみたのですが、
全部の処理が終わった後に、onFulfilledが呼ばれるので想定した動作になりませんでした。
JavaScript プログラミング講座
http://hakuhin.jp/js/promise.html
var url = window.location.origin;
var url1 = url + 'image/1.jpg';
var url2 = url + 'image/2.jpg';
function imageElementCreateAndLoad (url) {
var promise = new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function () {
resolve(image);
};
image.onerror = function() {
reject(new Error("Not Found"));
};
image.src = url;
});
return promise;
}
var promise = imageElementCreateAndLoad(url1);
promise.then(
function onFulfilled(value) {
_tracking['imageUrl'] = value.src;
}
);
promise = imageElementCreateAndLoad(url2);
promise.then(
function onFulfilled(value) {
_tracking['imageUrl'] = value.src;
}
);
上記で記述した、getImageURLが上手く動くようにすることはJavaScriptでは可能でしょうか。
ご存知の方がいらっしゃいましたら、教えてください。
よろしくお願いします。