CSS + images + scripts を含むページを読み込んでいます。そのため、ページの読み込み時に実行時にページに読み込まれたリソースの合計数をすべて計算して、その計算と少しの読み込み時間に基づいてプログレスバーを表示できるようにします。
私の質問は、画像 + スクリプト + css ファイルを含む dom に実際に読み込まれるリソースの数を計算する方法です。それに基づいて、プログレスバーの進行パターンを計算し、進行させる必要があります。
誰かがそれを行う方法に光を当てることができますか?
総数は次のとおりです。
$('script, link[type=text/css], img').size();
これにより、要求されたリソースの総数が返されます。
これを行う簡単な方法はありません。スクリプト タグとイメージ タグには load イベントがあるため、コールバックをアタッチしていつ読み込まれたかを知ることができます。Css にはクエリするイベントやプロパティはありませんが、img タグを使用して回避策を使用できます。しかし、これはそれほど単純ではありません。なぜなら、既にロードされているスクリプト タグにコールバックをアタッチすると、img タグと同じように、そのコールバックは起動しないからです。したがって、プログレス バーがドキュメント上のすべての img/script/css を追跡し始めると、どの img/script/css が既に読み込まれているかを把握し、まだ読み込まれていないその他のイベント コールバックをアタッチする必要があります。Img タグにはcompleteプロパティがありますが、スクリプトにはプロパティがないため、単に DOM をクエリしただけでは、スクリプトが読み込まれているかどうかを知ることはできません。CSSはもっとトリックです。
まあ、おわかりのように、これは単純な作業ではありません。実際には複雑であり、個人的には、プログレス バーを表示するためだけに時間と労力を費やす価値があるとは思いません。
あなたのページに古き良きスピンを表示して、幸せになってください:)
あなたは間違った方法で問題に取り組んでいると思います...
ページが大きすぎてプログレス バーが必要な場合は、おそらく大きすぎます。
ページを最適化して、レンダリングをすばやく開始し、その後、プログレッシブまたは遅延ロードなどの他のアイテムが追加されるようにします。