javascript - Dojo "loading" - メッセージ

Question

私は Dojo を初めて使用するので、少し助けが必要です。

一部のリンクには時間がかかります (ユーザーがクリックすると、ページの読み込みが開始されるまでに数秒かかります)。「読み込み中」メッセージを追加したいと思います。

「昔ながらの方法」でもできますが、新しい、より簡単でスマートな道場の方法を学びたいと思っています。

正確にどのように機能するかは今のところ重要ではありませんが、次のようなものを想像しています。

ブラウザウィンドウの中央に四角形が表示されます。(ドキュメントの途中ではありません。) GIF アニメーションと、「お待ちください...」のようなメッセージがあります。

他のすべての要素は無効になっており、少し「フェードアウト」している可能性があります。おそらく、「読み込み中」メッセージとドキュメントの残りの部分の間にある大きな白い 50% 透明の長方形です。

score 8 · Accepted Answer

dijit.Dialogあなたが説明していることは、モーダルがロードメッセージとともに表示されるまでに道場自体がすでにロードされていることを前提としています。

通常、ページが完全に読み込まれると dojo の実行が開始されます。通常は、dojo コードをのパラメーターとして渡される無名関数内に配置しますdojo.addOnLoad()。

そのためには、ページの残りの部分 (「リンク」と呼ばれるもの) を ajax を介して (たとえば、を使用して) ロードする必要がありますdijit.layout.ContentPane。そうすれば、コンテンツがダウンロードされる前に Dojo を実行でき、「待機中」のメッセージをより早く表示できます。

次のようになります。

<html>

<head>
<link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" />
<script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
/* make sure that you shrinksafe together your libraries and dojo's for faster loading... */
<script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script>
<script type="text/javascript">
   var dialog;
   dojo.addOnLoad(function(){
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.Dialog");
      dialog = new dijit.Dialog();
      dialog.setContent("<p>This page will be available in a tick!</p>");
      dialog.show();
   });
</script>
</head>

<body class="tundra">
   <div id="delayedContent" 
        dojoType="dijit.layout.ContentPane" 
        href="/myContentUrl"
        onLoad="dialog.hide()">
   </div>
</body>

</html>

その計画の唯一の欠点は、dojo 自体です。shrinksafeライブラリの重量は 90K を超えます (そこに入れるものの量によっては、最大 300K になる可能性があります)。接続が遅い場合でも、ダウンロードにかなりの時間がかかります。とは言っても、静的な90K について話している --- 同じユーザーがセッションごとに 1 回だけダウンロードし、それらの静的ファイルが提供されるときに適切なキャッシュ/有効期限ヘッダーを設定するのに時間がかかる場合は、それよりもさらに少なくなります。

score 7 · Accepted Answer

Dojo には、そのようなコンポーネントの 1 つが既にあります: Dojox Busy Buttonです。また、Sitepen による次の記事にも興味があるかもしれません: Dojo: Building Blocks of the Web (ページコンテンツのブロックを示します) およびImplementing a Web Application Preloading Overlay。

score 5 · Accepted Answer

私はこの目的のために dojox.widget.Standbyを使用しています: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

dojo.require("dojox.widget.Standby");

var standby = new dojox.widget.Standby({
                                 target: "target-id-toStandby",
                                 color: "white",
                                 image: "/images/loading-ajax.gif"
                             });
                             document.body.appendChild(standby.domNode);
                             standby.startup();
                             standby.show();

コンテンツを使用する準備ができたら...

standby.hide();

「target-id-toStandby」は、「フリーズ」する div の ID です。

score 4 · Accepted Answer

私はこのようなことをこのように実装しました:

まず、各ページで、クラス「slow」がアタッチされた任意の href にイベントハンドラーを追加します。

    dojo.addOnLoad(関数() {
        dojo.query('a.slow').onclick(function() {loading(); return true;});
    });

ローディング関数は次のようになります。

    関数の読み込み() {
        var underlay = new dijit.DialogUnderlay({'class': 'loading'});
        underlay.show();
    }

「loading」クラスの CSS は次のようになります。

div.loading {
    背景画像: url(/images/loading.gif);
    バックグラウンドリピート: リピートなし;
    背景位置: センター;
}

loading.gif素敵なアニメーション GIF はどこにありますか。

score 2 · Accepted Answer

pierdeux は私をこれで軌道に乗せました。これまでの私のコードは次のとおりです。

dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

function displayWait(txtContent) {
    if (!txtContent) {
        txtContent = "Please wait...";
    }
    txtContent = "<img src=\"loading.gif\" alt=\"\" /> " + txtContent;
    var thisdialog = new dijit.Dialog({ title: "", content: txtContent });
    dojo.body().appendChild(thisdialog.domNode);
    //thisdialog.closeButtonNode.style.display='none';
    thisdialog.titleBar.style.display='none';
    thisdialog.startup();
    thisdialog.show();
}

これは閉じることができないモーダルメッセージボックスであるため、ユーザーはページ上の他の要素を使用できません。これはまさに私が求めていたものなので、pierdeux の回答を受け入れます。

javascript - Dojo "loading" - メッセージ

5 に答える 5

Related

Reference