-3

2000 行の JavaScript コードがあります。この JavaScript コードを実行すると、時間がかかります。このJavaScriptをajaxローダーのように実行しながら、ページにローダーを表示したいと思います。クライアント側コード用のクライアント側ローダーが必要です。

Server Side code - Ajax Loader
Client side code - ?

誰でもこれを行う方法を教えてもらえますか。ご協力ありがとうございました。

4

2 に答える 2

1

最新のブラウザはすべて、2000 行の JS ファイルを簡単に実行できます。しかし、スクリプトの実行にユーザーが気付くほどの遅延がある場合、ほとんどのブラウザは、ユーザーにスクリプトの実行を続行するか停止するかを尋ねるモーダル ウィンドウを表示します。

また、より効率的なパフォーマンスを得るために、JS ファイルを最適化および縮小してみてください。

上記の方法で満足できない場合は、次のことを試してください。

  • HTML: 次の div を HTML ページに追加します。

    <div id="loadingPanel" class="loading-panel hidden"></div>

  • CSS:

    .loading-panel {top: 0; right: 0; bottom: 0; left: 0;z-index: 100 !important;background: #fff url('../img/loading.gif') no-repeat center center;opacity:.7;filter: alpha(opacity=70);-moz-user-select: none;-webkit-user-select: none;}
.hidden {visibility: hidden !important;}

  • JS: スクリプトまたはスクリプト内の関数の実行を開始する前に、次の操作を行います。

    $("#loadingPanel").removeClass("hidden");

    スクリプトまたは関数呼び出しの終了後、次の操作を行います。

    $("#loadingPanel").addClass("hidden");

ヒント: お気に入りの loading.gif を使用してみてください

于 2013-05-30T08:13:39.030 に答える
0

これはいくつかの方法で行うことができます。JavaScript コードの先頭で、変更/更新される要素に画像を動的に作成したり、ページに img 要素を作成したりできます。

Jquery を使用した最初の例:

$('the-element').html("<img src='ajax-loader.gif'>");

この状況では、要素は ajax ローダーとして開始され、スクリプトが要素を更新すると、要素が変更されます。これは一部のシナリオで機能する場合がありますが、すべてではありません。

Jquery を使用した 2 番目の例:

$('body').append("<img id='loading' src='ajax-loader.gif' style='position:fixed;left:50%;top:50%;'>");

この例では、これを JavaScript コードの先頭に配置し、ajax 読み込みイメージのサイズに応じてスタイルを調整してから、これを JavaScript コードの末尾に配置します。

$('#loading').hide();

また

$('#loading').remove();

これが役立つことを願っています。

于 2013-05-30T08:14:06.643 に答える