setIntervalの処理完了後の条件分岐について

Question

ローディング画面を作成中ですが、画像の読み込みが100になったら処理をしたいのですが、上手くなりません。
javascript得意な方見ていただけませんでしょうか？

  $(function(){
    var progress = 0;
    var imgCount = $('img').length;
    $("img").each(function(){
    	var src = $(this).attr('src');
    	$("<img>").attr('src',src).on('load',function(){
        progress++;
    	});
    });
    setInterval(function(){
      $("#progress-bar").css({
      	'width': (progress / imgCount) * 100 + '%'
      });
      if (progress >= 100) {
        $('#progress-bar').addClass('test')
      } else {

      }
    }, 1);
  });

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Answer 1

ぱっと見なので間違ってるかもしれません。

$(function(){
    var progress = 0;
    var imgCount = $('img').length;
    $("img").each(function(){
        var src = $(this).attr('src');
        $("<img>").attr('src',src).on('load',function(){
        progress++;
        });
    });
    setInterval(function(){
      $("#progress-bar").css({
          'width': (progress / imgCount) * 100 + '%'
      });
      if ((progress / imgCount) * 100 >= 100) {
        $('#progress-bar').addClass('test')
      } else {

      }
    }, 1);
  });

if(progress>=100)のところですが、100 => 100%を表してるものだと思います。
しかしながらprogress自体には何%であるという情報は入っていないことはお分かり頂けると思います。

Answer 2

ローディング に関して、別の考え方
（ご質問タイトルにある setInterval() を使わない方法です）

URL一覧から動的にHTMLImageElement を作成し、文書木に配備する

let images = [
  /* imageURL */
];

let loadedCount = 0;
let checkComplete = () => {
  ++loadedCount;

  // プログレスバー更新
  console.log("progress : ", (loadedCount / images.length)*100, "%" );

  if( loadedCount === images.length ) {
    // 全て読み込んだ
    console.log( 'loadedAll' );
  }
}

// url 一覧から画像を実際に読む。head に書く場合は DOMContentLoaded で
images.forEach( url => {

  let img = Object.assign(new Image(),{
    src:url,
    onload(event){

     // 文書木に配備する場合のタイミング #2
      checkComplete();
    }
  });
  // 文書木に配備する場合のタイミング #1
});

文書木(body以下)に配備する場合のタイミング

1. サーバーへ要求時に配備
2. サーバーから応答後に配備

$(img)（HTMLImageElement を引数に渡したjQueryオブジェクト）の append系APIで配備。

---

setInterval() は不要になった段階で clearInterval() も考えたほうがいいです。