jQueryでプログレスバー機能を実装する
ページの読み込み進捗状況をプログレスバーで表示されているのをたまに見かけますが、今回はjQueryでそれを実装してみたいと思います。前回記事「jQueryでページローディング機能を実装する」と合わせてページローディングのUIとしてみたり、ウェブアプリの機能としても使えそうです。
ただし、今回は簡素なものになりますので厳密に読み込み状況を表現する場合は別の方法を検討した方が良さそうです。あくまでビジュアルとしてみせる方法になります。
今回のプログレスバーで表現する進捗状況ですが、ロジックとしてはページ内部の画像の読み込み完了の割合を基準としています。理由としては他のファイルと比べて相対的にファイルサイズが大きいのである程度の精度が期待できるという点です。しかしCDNで配信されているjsファイルなど画像より読み込み時間がかかりそうなケースもありますが、そこは気にしないという前提です、、
ではコードを見ていきます。まずはHTMLから、プログレスバーの背景とプログレスバー本体の要素を重ねるように配置します。CSSで見た目を調整しますが、プログレスバー本体のwidthは0にしておきます。
いかがでしょうか、簡単ですが結構本格的な感じに仕上がりますのでぜひ試してみてはいかがでしょうか。今回のサンプルはこちらに用意しています。 (参考にさせていただいたサイト様) ページを読み込む際にプログレスバーでローディング状況を表示
// HTML ※一部省略 <div id="progress-box"> <div id="progress-bar"> </div> </div> // CSS #progress-box { width: 100%; height: 60px; background: #c5c5c5; position: relative; } #progress-bar { width: 0; height: 60px; background: #00cab9; position: absolute; left: 0; top: 0; }次にjQueryでプログレスバーの機能を実装していきます。まずは画像のカウント用変数とページ内の画像のトータル数を取得します。そして、画像が読み込まれるごとにカウント用変数に数値を追加していきます。 それに合わせて、ページ全体の画像に対して読み込んだ画像数の割合でプログレスバーのwidthを変えるようにしていきます。すべて画像が読み込まれた状態でwidthが100%になるようにします。この時に読み込み毎に実行する必要があるのでsetInterval関数の中で行うようにします。引数で指定する間隔の時間は短くすればするほどプログレスバーの動きが滑らかになります。
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 + '%' }); }, 1);
いかがでしょうか、簡単ですが結構本格的な感じに仕上がりますのでぜひ試してみてはいかがでしょうか。今回のサンプルはこちらに用意しています。 (参考にさせていただいたサイト様) ページを読み込む際にプログレスバーでローディング状況を表示
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories