jQuery_jquery を使用してページ読み込みプログレスバーをシミュレートするための実装コード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery_jquery を使用してページ読み込みプログレスバーをシミュレートするための実装コード

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:58 PM

プログレスバー

どの方法でもページ全体のサイズと現在どれだけ読み込まれているかを取得することはできないため、読み込みの進行状況バーを作成する唯一の方法は、それをシミュレートすることです。では、どうやってシミュレーションすればよいのでしょうか？
ページは上から下に実行されることがわかっています。つまり、ページ上の特定の場所でどれだけロードされるかを大まかに見積もることができ、jq を使用して進行状況バーをシミュレートして表示できます。
まず、上の図のようなプログレスバーを描画しましょう。これについてはあまり説明する必要はありません。
CSS

コードをコピーしますコードは次のとおりです:

*{margin:0;padding:0;font-size:12px} 
.loading{position:relative;top :0;left:0} 
.text input{float:left;color:#fff;height:32px;line-height:34px;padding:0 15px;background :#A70000;border:0} 
 .jindu{float:left;margin-left:14px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:相対} 
.jindu b{color: #A70000;font-size:0px;border-width:10px;border-color:transparent 透明 透明 #A70000;border-style:dotted dotted dotted solid;position:absolute;left :-16px;top:5px} 
 .jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute} 
.jindu .text{width:150px ;height:32px;line-height:32px; text-align:center;position:absolute} 

 

HTML

コードをコピーコードは次のとおりです。

< div class="text">合計ページ進行状況0%

< ;/div>

このとき、参照場所はhead領域ではなく、htmlコードの直下であることに注意してください。これはなぜでしょうか? スタイルを head に置く理由は、ページを読み込む最初のステップでスタイルが読み込まれるようにして、ページが乱雑にならないようにするためです。 JS は必要なく、ページ上の大きなファイルは主に js であるため、本文に js を読み込むのはプログレスバー用です。

プログレスバーは jquery によって描画および参照されます。次に、メソッドを記述する必要があります。つまり、プログレスバーを移動させることができます。

コードをコピーします。 > コードは次のとおりです。 var reading = function(a,b){

var c = b*1.5

if(b==; 100){ 
 $('.loading .jindu2').animate({width:c 'px'},500,function(){ 
$('.loading input').val(a); 
$(' .loading font').text(b); 
$('.loading').animate({top:'-32px'},1000,function(){ 
alert( 'ページの読み込みが完了しました') ; 
}); 
$('.loading .jindu2').animate({width:c 'px'},500 ,function(){ 
$('.loading input').val(a); 
$('.loading font').text(b); 
} 
}; 

 
ここでは、ロード中のコンテンツのプロンプト情報とロードの進行状況のパーセンテージを表示するための 2 つのパラメーターを作成しました。読み込みの進行状況をテストします

コードをコピーします

コードは次のとおりです:

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

HTML と CSS を使用して進行状況バーの色を設定するにはどうすればよいですか? Sep 19, 2023 pm 08:25 PM

Web サイト開発において、進行状況バーは Web サイトの重要な部分です。プログレスバーはプロセスの進行状況を示します。これを利用すると、ユーザーは、読み込み時間、ファイルのアップロード、ファイルのダウンロード、その他の同様のタスクを含む、Web サイト上で行われている作業のステータスを確認できます。デフォルトでは灰色です。ただし、進行状況バーを目立たせて視覚的に魅力的にするために、HTML と CSS を使用して色を変更できます。プログレスバーとは何ですか?進行状況バーは、タスクの進行状況を示すために使用されます。これはグラフィカルユーザーインターフェイス要素です。これは基本的に、タスクの進行に応じて徐々に埋まっていく水平バーと、パーセンテージ値またはその他の完了インジケーターで構成されます。プログレスバーは、ファイルのアップロード、ファイルのダウンロード、ソフトウェアのインストールなどのプロセスの完了に関する情報をユーザーに提供するために Web アプリケーションで使用されます。

JavaScriptでページ読み込みプログレスバー機能を実装するにはどうすればよいですか? Oct 27, 2023 am 08:57 AM

JavaScript はページ読み込みの進行状況バー機能をどのように実装しますか?最新のインターネットアプリケーションでは、ページの読み込み速度がユーザーエクスペリエンスの重要な要素の 1 つです。ユーザーに読み込みプロセスを示すために、多くの Web サイトやアプリケーションは読み込み進行状況バーを使用しています。 JavaScript は、ページ読み込みの進行状況バー機能を実装する簡単かつ効果的な方法を提供します。具体的な実装プロセスは次のとおりです: HTML 構造の作成. まず、ページ上の適切な位置にプログレスバーの HTML 構造を作成します。

Vue を使用してプログレスバー効果を実装する方法 Sep 19, 2023 am 09:22 AM

Vue を使用してプログレスバー効果を実装する方法プログレスバーは、タスクまたは操作の完了を表示するために使用できる一般的なインターフェイス要素です。 Vue フレームワークでは、単純なコードを通じてプログレスバーの特殊効果を実装できます。この記事では、Vue を使用してプログレスバー効果を実装する方法を紹介し、具体的なコード例を示します。 Vue コンポーネントの作成まず、プログレスバー機能を実装するために Vue コンポーネントを作成する必要があります。 Vue では、コンポーネントは再利用可能であり、複数の場所で使用できます。 Pro という名前のファイルを作成します

CSS を使用して Web ページの読み込み進行状況バーを作成する方法の実装手順 Oct 26, 2023 am 11:00 AM

CSS を使用して Web ページの読み込み進行状況バーを作成する方法の実装手順最新の Web デザインでは、読み込み速度がユーザーエクスペリエンスにとって重要です。ユーザーエクスペリエンスを向上させるために、CSS を使用して Web ページの読み込み進行状況バーを作成し、ユーザーが Web ページの読み込みの進行状況を明確に理解できるようにすることができます。この記事では、CSS を使用して Web ページの読み込み進行状況バーを作成する実装手順を紹介し、具体的なコード例を示します。ステップ 1: HTML 構造まず、以下に示すように、進行状況バーを表す div 要素を HTML に追加する必要があります: <divclass=&q

Vue と Element-UI を使用してプログレスバーと読み込みアニメーション効果を実装する方法 Jul 21, 2023 pm 08:54 PM

Vue と Element-UI を使用してプログレスバーとアニメーション効果の読み込みを実装する方法 Vue.js は軽量のフロントエンドフレームワークであり、Element-UI は Vue.js に基づく UI コンポーネントライブラリであり、豊富なコンポーネントセットを提供しますこの効果は、美しいフロントエンドインターフェイスを迅速に開発するのに役立ちます。この記事では、Vue と Element-UI を使用してプログレスバーと読み込みアニメーション効果を実装する方法を紹介します。 1. まずElement-UIをインストールして導入します。

HTMLとCSSを使用してプログレスバーを作成する方法 Sep 05, 2023 am 09:09 AM

概要プログレスバーは、Web アプリケーションの主要コンポーネントです。進捗は、プロジェクトまたはタスクの完了を示します。このモジュールでは、HTML を使用して進行状況バーを構築し、CSS でスタイルを設定します。プログレスバーの進捗アニメーションも提供します。このタスクでは、@keyframes を使用して進行状況バーをアニメーション化します。アニメーションの長さ、名前、タイミングなどのアニメーションスタイルプロパティを使用します。アルゴリズムステップ 1 - テキストエディターで HTML ボイラープレートを作成します。ステップ 2 - 親 div コンテナを作成し、クラス名を barContainer として定義します。ステップ 3 - 次に、現在の親 div の別の子を作成し、クラス名を定義します。ステップ 4 - 進行中の継承とアニメーション化される子を作成します。

Vueコンポーネント開発：プログレスバーコンポーネントの実装方法 Nov 24, 2023 am 08:56 AM

Vue コンポーネントの開発: プログレスバーコンポーネントの実装方法はじめに: Web 開発では、プログレスバーは一般的な UI コンポーネントであり、データ要求、ファイルのアップロード、フォームの送信などのシナリオで操作の進行状況を表示するためによく使用されます。 Vue.jsではコンポーネントをカスタマイズすることで簡単にプログレスバーコンポーネントを実装することができますので、本記事ではその実装方法と具体的なコード例を紹介します。 Vue.js初心者の参考になれば幸いです。コンポーネントの構造とスタイルまず、プログレスバーコンポーネントの基本構造とスタイルを定義する必要があります。

PHP開発：記事閲覧プログレスバーと共有機能の実装方法 Sep 22, 2023 am 08:06 AM

PHP 開発: 記事閲覧プログレスバーと共有機能の実装方法はじめに: 記事閲覧プログレスバーと共有機能は、ユーザーにより良い読書体験を提供し、コンテンツの共有を容易にする重要な機能です。 PHP 開発では、これら 2 つの機能を何らかの技術的手段によって実現できます。この記事では、具体的な実装方法と対応するコード例を紹介します。 1. 記事閲覧プログレスバーの実装記事閲覧プログレスバーの実装のポイントは、現在のユーザーの読書進捗状況（つまり、現在スクロールしている文書の高さ）を取得し、それを全体に対する相対値に変換することです。記事。

See all articles