JavaScriptで任意URLに画像が存在しているかを判定したい。


JavaScriptで指定した画像URLに画像が存在するかを判定することは可能でしょうか。

やりたいことは「画像1」と「画像2」のURLが分かっている場合に、

[code]

    function getImageURL() {
        /* 「画像1のURL」に画像が存在すれば「画像1のURL」を返却する */
        /* 「画像2のURL」に画像が存在すれば「画像2のURL」を返却する */
        /* 両方なければ''を返却する */
    }
    
[/code]

と言うことがやりたいです。  
色々調べてはみたのですが、  
JavaScriptでは画像の読み込み処理を非同期で行っているようで、  
読み込んでいる間に、次の処理に行ってしまい、''が返却されてしまいます。  
また↓のサイトを参考にpromiseを使用してやってみたのですが、  
全部の処理が終わった後に、onFulfilledが呼ばれるので想定した動作になりませんでした。

JavaScript プログラミング講座  
<http://hakuhin.jp/js/promise.html>

[code]

    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;
        }
    );
    
[/code]

上記で記述した、getImageURLが上手く動くようにすることはJavaScriptでは可能でしょうか。  
ご存知の方がいらっしゃいましたら、教えてください。  
よろしくお願いします。




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

[code]

    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";
    }
    
[/code]




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

[code]

    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";
    }
    
[/code]

