1

約260行を含むデータのテーブルがあります。これらの各行は、parentHeaderNameなどの属性によって識別されます。そのテーブルのヘッダーがクリックされると、ヘッダーをajaxload.gifイメージに簡単に変更するjQueryが配置されます。

$('#Header').html('<img src="images/ajaxload.gif"');

次に、を呼び出して260行すべてを切り替えます

$([parentHeaderName=something]).toggle();

残念ながら、ヘッダーをajaxload.gifに変更して正しく実行するコードの部分を取得できません。そのステートメントとtoggleステートメントの両方がすべて同時に実行されているかのようです。つまり、ユーザーにはajaxload.gifが表示されません。画像を表示する唯一の方法は、2つのステートメントの間にalert（'...'）メッセージを配置することです。明らかに、これは解決策としては望ましくありません。delay（）とsetTimeoutを使用してみましたが無駄になりました。私が必要としているのは、トグルの実行前に画像を表示できるようにする、jQueryまたはjavascriptに相当するある種のDoEventsだと思います。

何か案は？

ありがとう、クリス

更新：フィードバックの皆さんに感謝します。実際のコードは次のとおりです。

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

（このコードは、実際にはヘッダーをajaxload.gifではなくexpand.gifまたはcollapse.gifに変更します。）

遅延の提案を試しました

$(jq2).delay(500).toggle();

しかし、それは何の助けにもなりませんでした。トグルする必要のある行数が少ない場合（たとえば、最大で約20行）は問題ありません。しかし、場合によっては、束（260など）を非表示にする必要があります。これは、ブラウザーがDOMをくぐり抜けて、すべての非表示を実行するのに数秒かかるかのようです。そのため、私はもともとajaxload.gif画像を使用したいと思っていました。

ありがとう、クリス

4

2 に答える 2

1

みんな助けてくれてありがとう。結局のところ、問題はtoggle（）ステートメントにありました。.toggle（）を実行すると、.delay（）、. when（）などの処理に関係なく、ブラウザが少しハングします。結局、.hide（）と.show（）、およびこれらの変更により、期待される動作まで高速化されます。現在の可視性を判断するために（したがって、.hide（）または.show（）のどちらを使用する必要があるかを知るために）、最初に一致した要素（$（criteria：first：visible）など）の可視性を確認し、適切に続行しました。

よろしくお願いします。

-クリス

于 2011-03-07T20:54:09.253 に答える
0

私が最初に考えたのは、このトグルが非常に高速に行われているため、ajaxload.gifもまったく必要ないということです。そうだとすれば、それは良いことですよね？

私の2番目の考えは、ajaxload.gifをヘッダーテキストに置き換える方法です...このコールバックはいつどのように発生しますか？

私の3番目の考えは、すべてが非常に迅速に行われていることです。これは良いことですが、それでもローダーを表示したいのですが、その場合は、.delay（500）または任意の時間をチェーンにスローします。 、それを保持する必要があります。表示しなかったコードがもっと含まれているように感じますが、これを表示できますか？

これが私の簡単な考えです。

$( function(){
    var header = $('#Header');
    header.bind('click', function(){
        $(this).html('<img src="images/ajaxload.gif">');
        $([parentHeaderName=something]).delay(500).toggle();
    });
});

これにより、実際にトグルが起動するまで待機するため、ajaxload.gifをヘッダーテキストに再度置き換える直前に発生するチェーンにその遅延を設定することをお勧めします。

これが何らかの形でお役に立てば幸いです。そうでない場合は、詳細を教えてください。さらに詳しく調べていただければ幸いです。

編集：

さて、今私はそれがロードされていない画像に関係していると思っています、そしてアラートはこれらの画像をロードする時間を与えています。これらの画像はそもそもページ上にないため、ロードする前にページにそれらへの参照がないため、タイミングが乱れる可能性があります...ロードを試みてから、コールバックで、クリック...jquery1.5を使用している場合は、いつ役立つか...

$.when( $('<img src="images/collapse.gif" />').load(), $('<img src="images/expand.gif" />').load() ).then( clickSetUp );

クリック関数であるclickSetUp..。

それを試してみてください、病気が周りにあります:)

于 2011-03-02T18:19:35.863 に答える