web-dev-qa-db-ja.com

アプリを初めて読み込むときに読み込みインジケーターを表示する方法

Angular.js、jquery.js、bootstrap.js、bootstrap.css、some_plugins.js、my_main.jsなど、AngularJsシングルページアプリケーションの多くのファイルをロードする必要があります。

アプリ全体をロードするのには時間がかかるため、すべてのjsおよびcssファイルがロードされてコンテンツが表示されるまで、ロードインジケーター（スピナーなど）をvoidページに表示したいと思います。

javascriptjquerycssangularjstwitter-bootstrap
11
Sn0opr

Angularアプリは Angular Loading Bar を使用します。 this のように見えます。

  • XHRリクエストが角度付きで出るたびに適用されます
  • 読み込みアイコンを表示しないリクエストを指定できます
  • リクエストによりユーザーが待機した場合にのみ表示されます
  • お好みに合わせてスタイリングできます
  • サービスモジュールに挿入されて機能する
26
Equan Simmonds

以前は、ほぼすべてBackbone.jsで記述されたレガシープロジェクトで Pace.js を使用しました。このプロジェクトでは、すべての依存関係が解決されるのを待つのがかなり面倒でした。

始めるための設定はほとんどないので、比較的単純なライブラリを探している場合は、それを使用します。

編集：

ドキュメントから：

（できるだけ早く）ページに、pace.jsとお好みのテーマCSSを含めれば完了です。

Paceは自動的にAjaxリクエスト、イベントループラグ、ドキュメントの準備完了状態、およびページ上の要素を監視して、進行状況を判断します。 ajaxナビゲーションで再び始まります！

AMDまたはBrowserifyを使用している場合は、pace.jsを必要とし、ロードプロセスのできるだけ早い段階でpace.start（）を呼び出します。

例

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
14
bazeblackwood

次のように、3つのステップで簡単に実行できます。

1. _<div class="se-pre-con"></div>_内に_<body>_を追加します。

2. _.se-pre-con_ cssクラスをスタイルに追加し、

3.最後にこれらのいくつかのjqueryコードを追加します：

$(window).load(function () {$(".se-pre-con").fadeOut("slow");});

（プロジェクトにJQueryライブラリを追加することを忘れないでください）

それでおしまい。

これは機能する例です：

_<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>title</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta content="" name="keywords">
        <meta content="" name="description">
        <meta content="width=device-width, initial-scale=1" name="viewport" />

        <style>


            body {
                background: green;
            }

            .se-pre-con {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('https://cdn.dribbble.com/users/421466/screenshots/2390664/orbit-400px.gif') center no-repeat white;
                background-size: 150px 150px;
            }
        </style>

    </head>
    <body>

        <div class="se-pre-con"></div>

        <!--==========================
        your body content will come here
        ============================-->


        <script>
            $(window).load(function () {
                $(".se-pre-con").fadeOut("slow");
            });
        </script>

    </body>

    </html>
_

この例では、ページが軽いため、ローダーgifが非常に速く消えます。しかし、重いページでは、問題の良い解決策です。

これは plunker の実行です

それが役に立てば幸い

0
ali pournemat