2

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では可能でしょうか。
ご存知の方がいらっしゃいましたら、教えてください。
よろしくお願いします。

2 件の回答 2

4

XMLHttpRequest で GET か HEAD で画像のURLにリクエストを投げると status が 200 か 404 かで判断出来そうです。

var url = window.location.origin;
var url1 = url + "/image/1.png";
var url2 = url + "/image/2.png";

function load(_url){
  var xhr;
  xhr = new XMLHttpRequest();
  xhr.open("HEAD", _url, false);  //同期モード
  xhr.send(null);
  return xhr.status;
}

function getImageUrl(){
  if(load(url1) == 200)
    return url1;
  if(load(url2) == 200)
    return url2;
  return "null";
}
1

1つ目のpromiseの結果を待つ必要があります。

var url = window.location.origin;
var urls = [
  url + 'image/1.jpg',
  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;
}

urls.reduce(
    function (promise, url) {
        return promise.then(
            function onFulfilled(image) {
                return image.src;
            },
            function onRejected(value) {
                return imageElementCreateAndLoad(url)
            }
        )
    },
    Promise.reject()
)
.then(
    function onFulfilled(url) {
        return url;
    },
    function onRejected(value) {
        return ''
    }
)
.then(
    function onFulfilled(url) {
        console.log(JSON.stringify(url));
    }
)

参考:Promiseと組み合わせて非同期の直列処理を使う

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。