2

こんにちは、これは stackoverflow に関する私の最初の質問です。私の問題に役立つことを願っています。

次のようなユーザー コントロールに空の div セクションがあります。

<div id="attachmentlist"></div>

この div のコンテンツは、この関数の bindattachment() という名前の JavaScript 関数に読み込まれます。いくつかの jquery 関数を使用して html を設定し、このような div コンテンツに設定しました

jQuery("#attachmentlist").html(somegeneratedhtml);

問題なく動作しますが、「somegeneratedhtml」の生成に時間がかかりすぎて、div コンテンツがこの生成された html に設定される前に、「loading please wait ...」のようなテキストが同じ div に表示されます。したがって、同じコードを使用して html を設定した後、このように「somegeneratedhtml」で div を設定しました

jQuery("#attachmentlist").html('<p>loading please wait ...');

したがって、 bindattachment() は次のようになります

function bindattachment()
{
   jQuery("#attachmentlist").html('<p>loading please wait ...</p>');
   var html;
   html = "somegeneratedhtml";
   jQuery("#attachmentlist").html(html);
}

そして、divの添付ファイルリンクのリストが表示されますが、「読み込み中です...」は表示されません。

bindattachment で html が生成されるまで「読み込み中です...」というフレーズが div に表示されます

4

5 に答える 5

4

JS 実行コンテキスト中、UI は通常、JS が終了した後にのみ更新されます。したがって、

jQuery("#attachmentlist").html('<p>Loading, please wait ...</p>');
// long loop here
jQuery("#attachmentlist").html('<p>Finished</p>');

.htmlJS が終了するまで UI スレッドが実行されないため、DOM への最初の更新 ( の呼び出し) は無視されます。レイアウトをトリガーする JS で実行できることはありますが、UI が実際に更新されるわけではありません。

最初のメッセージが確実に表示されるようにするには、メッセージを更新してから、コードを実行して HTML を非同期的に生成する必要があります。たとえば、

var div = $('#attachmentlist');
// This will never display because the HTML is overwritten before the UI thread
// runs
div.html('<p>First call to set html, will not display');
// This will display because there are no other synchronous calls to update the same
// DOM elemements
div.html("second call to set html, this displays");
// The function passed to setTimeout runs after the UI has had a chance to update
setTimeout(function() {
    // Long running script
    var html = "";
    for (var i=0; i < 100000; i ++) {
        html+= "testing...<br/>";
    }
    // By updating the HTML with a timeout, the previous call to $.html
    // will be visible on the screen for a minimum amount of time
    div.html(html);
}, 1);

長時間実行されるスクリプトに関する注意

JS で HTML を生成するのに時間がかかる場合、ブラウザがロックされる可能性があることに注意してください。Web ワーカーを使用して HTML を非同期的に生成する必要があります。 JSスレッドでしょう。

于 2013-05-01T20:14:00.103 に答える
0

あなたのコードでjsfiddleを作成しました。$(document).ready()関数を実行するための簡単な関数を追加しました。

$(document).ready(function() {
   bindattachment(); 
});

function bindattachment()
{
   jQuery("#attachmentlist").html('<p>loading please wait ...</p>');
   var html;
   html = "somegeneratedhtml";
   jQuery("#attachmentlist").html(html);
}

はdiv、正しい「somegeneratedhtml」を示しています。

「some generatedhtml」を生成しているものを確認すると役立ちます。その関数内でエラーが発生している可能性があります。

于 2013-05-01T20:10:45.193 に答える
0

jQueryでは、使用する必要があります

jQuery("#attachmentlist").html('<p>loading please wait ...</p>');

id attachmentlist を使用して div にテキストを追加します。

わかりました、あなたはすでにそれを修正しました:)

于 2013-05-01T20:04:46.047 に答える
0

ロードにそれほど時間がかかることに驚いていますが、何が起こっているのかはロード中であると思いjQuery("attachmentlist").html(somegeneratedhtml);ます。私がすることは、divattachmentlist 内に 2 つの s を作成することです。1 つは読み込みメッセージを含み、もう 1 つは生成された html 用です。と を使用.hide()し.show()て、どちらを表示するかを選択します。

于 2013-05-01T20:07:51.743 に答える
-1

かかる時間は、div 内の html を変更することではなく、html をレンダリングすることです。

于 2013-05-01T20:11:24.757 に答える