【js】createElementでonerrorの時に表示されない画像を繰り返し作る

Question

###前提・実現したいこと

javascriptで、ブラウザ上で動くアルバムのようなプログラム？を作っています。
その際、ランダムに画像を表示することができればと思い、javascriptでなんとか画像の有無を調べ、存在が確認された画像のみをシャッフルして表示させるシステムを作りたいと思いました。

javascriptで画像の有無を直接調べることが困難なのは検索で知ったのですが、もしかしたら画像を一瞬だけ表示させ、その横幅を調べ、0（あるいは特定の数値）以外であれば……という風にできないかと考えました。

そのために、createElementで一瞬だけ画像を表示させた際、存在しなかった画像を表示させない・もしくは代替画像に置き換える、ということができないかと考えています。

###該当のソースコード

私が考えた「画像を表示させ、存在しない画像に関しては表示しない」コードが以下のものになります。

function hidden(){
  for (var pagei = 1; pagei < maxPage+1; pagei++){
    for (var noi = 1; noi < maxNo+1; noi++){
        //アルバムの全ページの全画像について繰り返しを命令
      var img = document.createElement("img");
      img.src = "page/file" + pagei + "/" + noi + ".jpg";
      img.id = "img" + ((pagei-1) * maxNo + noi);
      img.addEventListener("error", this.remove , false);
      img.className = "hidden";
      var objBody = document.getElementsByTagName("body").item(0);
      objBody.appendChild(img);
    }
  }
}

これだと、確かにthis.removeは動いてくれたのですが、以降createElement自体が消去されてしまい、たとえば１枚目と３枚目のみ画像が存在した時、２枚目でonerrorが働いて３枚目以降が表示されなくなってしまうという状況になってしまいました。

また、代替表示として以下のものも考えたのですが（addEventListenerの箇所以外変わっていません）、こちらは書き方が悪いのかうまくEventが働いてくれませんでした。
ちなみに途中に出てくるnoimage.jpgは1px*1pxの真っ白なjpg画像です。

function hidden(){
  for (var pagei = 1; pagei < maxPage+1; pagei++){
    for (var noi = 1; noi < maxNo+1; noi++){
      var img = document.createElement("img");
      img.src = "page/file" + pagei + "/" + noi + ".jpg";
      img.id = "img" + ((pagei-1) * maxNo + noi);
      img.addEventListener("error", this.src="storage/sozai/noimage.jpg" , false);
      img.className = "hidden";
      var objBody = document.getElementsByTagName("body").item(0);
      objBody.appendChild(img);
    }
  }
}

そもそもjavascript向きのプログラムでないことは重々承知なのですが、後学のためにも、どうすればこのような繰り返しの際にerrorを追加できるのかどうか知りたいです。
なにとぞよろしくお願いします。

Answer 1

ごめんなさい、私の理解が至っていないかもしれないのですが
サーバー側で画像の一覧をjsonで返すような仕組みをつくり
ajaxで受け取って処理するのが妥当では？

Comments

[niutsuhime]

すみません、実は私の表記し忘れなのですがサーバーを介さずローカルで動くプログラムを作っていたんです。
そのような処理方法もあるんですね。まだ知識が及ばずyambejpさんのおっしゃっていることをきちんと理解できているのか自信がないので、しっかり調べてみます。ありがとうございました。

Answer 2

試していませんが、こんな感じでどうでしょう。JavaScript はブロックスコープを持たないので（letやcatch節を除く）変数が上書きされていくのが問題なのかと予想しました。

function hidden(){
  for (var pagei = 1; pagei < maxPage+1; pagei++){
    for (var noi = 1; noi < maxNo+1; noi++){
        //アルバムの全ページの全画像について繰り返しを命令
      ( function( pagei, noi, maxNo ) { // 即時関数
        var img = document.createElement("img");
        img.src = "page/file" + pagei + "/" + noi + ".jpg";
        img.id = "img" + ((pagei-1) * maxNo + noi);
        img.addEventListener("error", img.remove , false);
        img.className = "hidden";
        document.body.appendChild(img);
      } )( pagei, noi, maxNo );
    }
  }
}

【Document.body - body要素を取得する】
https://syncer.jp/javascript-reference/document/body

【JavaScript中級者への道【3. 関数スコープ】 - Qiita】
http://qiita.com/matsuby/items/1010ae38ee6258fd8020

Comments

[niutsuhime]

参考になるURLまで貼っていただいて恐縮です。
思っていた通りに動きました！　本当にありがとうございました。