プログレスバーのようなもの実装について

Question

プログレスバーのようなものを作成しようとしていますが、うまく動作しないというか、疑問点と追加したい動きがあるのですが
どなたかご教授いただけますでしょうか。
参考は下記になります。
https://designsupply-web.com/knowledgeside/2930/

完成の動きのイメージはcssで記載しているところの、
transform: scaleX(0);がscaleX(1);
になるイメージになります。
png画像が黒いベタで塗られていくような、、

【疑問点】
・参考のページでは、何故img要素を取得するのに、$("<img>")という<>つきの書き方をしているのか。
・setInterval構文無しでも動く気がしましたが動きませんでした。。何故なんでしょうか、、？？

【追加したい動き】
プログレスの動きが完了した時にコールバックとしてロード画面を消したいです。

<div id="loader">
	<div class="loading_logo">
		    <div class="loading_bg"></div>
	        <div class="loading_progress"></div>
	        <div class="loading_cover"></div>
	</div>
</div>

#loader {
 width: 100%;
 height: 100%;
 background-color: #fff;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
.loading_logo {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .loading_bg {
    background: #666;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
  }
  .loading_progress {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s linear;
  }
  .loading_cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/loading_logo.png) no-repeat;
  }
}
}

$(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(){
   $(".loading_progress").css({
	"transform" : 'scaleX('+ progress / imgCount +')'
   });
}, 1000);



});

Answer 1

・参考のページでは、何故img要素を取得するのに、$("<img>")という<>つきの書き方をしているのか。

画像はすでに読み込まれている可能性があります。この場合は complete プロパティを見ればいいのですが、簡単のために src 属性を同じにした別要素を用意して利用しているものと思います。

・setInterval構文無しでも動く気がしましたが動きませんでした。

動いてしまい確認できませんでした。何か間違っているのかもしれません。

完了した時にコールバックとしてロード画面を消したい

1秒後に消すなどが考えられると思います。

       if (progress === imgCount) {
           setTimeout(function() { $('#loader').remove(); }, 1000);
       }

setInterval() なので終了後も動き続けるのが気になります。

Comments

[yourai]

x_x様

回答ありがとうございます。
$("<img>")についての、
>>画像はすでに読み込まれている可能性があります。
とありますが、ちゃんとしたプログレスバーの動きとは違ってくるのでしょうか、、？？

[x_x]

読み込み済みのものがあると後からつけた onload が走らないため、完了しなくなります。

[yourai]

なるほど、、ただやはり根本的な$("<img>")の<>付きの書き方がいくら探しても出てこないのですが、、
根本的な質問で申し訳ありません。。

[x_x]

あ、そっちですか。
ここは HTML 断片から要素を作っています。
img は空要素なのでわかりにくかったですかね？
https://api.jquery.com/jQuery/#jQuery-html-ownerDocument

[yourai]

あ、ページのimgを読んでから、そのsrc属性を、空の生成した<img>のsrcに書き換えてることで疑似的なプログレスバーを作ってるんでしょうか、？　なるほど、、

[yourai]

１つ追加で質問なのですが、、ロード時に、一瞬pngをマスクする黒いdivが表示されてしまうのですが、、これはしょうがないのでしょうか？？

[x_x]

それは確認できなかったのですが、何のブラウザを使ってますか？

[yourai]

ご回答ありがとうございます。
失礼しました、黒のdivでは無く、#666で指定している.loading_bgが一瞬表示されるようです。
iPhone、safariで見たときに、毎回なるわけではないのですが、若干気になります、、。
マスクの画像を背景で指定している→img要素の読み込みにはカウントされない為時差が生じてしまっているのでしょうか、、

[x_x]

.loading_bg は参考にしたサイトにはない部分で、 yourai さんがそのようにしたくて書いているのではないでしょうか？
loading_logo.png には透過画像を使っているのかと思っていましたが、そうでないならそもそも進捗状態が画像によって隠れてしまっているのではないですか？

[yourai]

.loading_bg は参考にしたサイトにはない部分で、 yourai さんがそのようにしたくて書いているのではないでしょうか？
>>そうなります。具体的にご提示できるサイトが無いのですが、
z-index的に下から、
①グレーのベタ塗りレイヤー
②scaleX(1)にさせる黒レイヤー
③ABCという文字(これがloading_logo.pngになるのですが、文字の部分を白抜きしたものになります)がプログレスの進捗にしたがって、②がscaleX(1)になっていくに伴い黒く塗られていくように見えるイメージです、ただ、その動き自体はうまくいっています。
背景画像として③を設定してるのでチラつくんですかね、、

[x_x]

Data URI にすることも考えられますが
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
https://www.cssportal.com/image-to-data/
見せたくないものなら使わなければいいのでは？

[yourai]

①グレーのベタ塗りレイヤー
②scaleX(1)にさせる黒レイヤー
をopacity:0にしておいて、onload時に1にするスクリプトを記載したら解決いたしました、、！(おそらく)
勉強になりました、ありがとうございました！