0

これを使用して、ページを更新せずにイベントを動的にロードしていますが、ロードに時間がかかりすぎるため、UXを向上させるには、「イベントのロード」などを追加する必要があると思いましたが、これまでのところ無駄です。

function calendarAjax () {

    $('#month_nav a').live('click', function() {
        $('#events_container').animate({ opacity: "0" }, 200 ).load($(this).attr('href')+' #events_content' , function(){
            $(this).animate({ opacity: "1" }, 600 );
        });
        return false;
    })

};

どんな援助も大歓迎です。

ありがとう。

4

3 に答える 3

1

あなたは3つのものが必要です：

ローダー：

<div id="loader">
I'm loading something
</div>

ローダーのCSS：

#loader {
   /* some design */
}

その可視性を切り替えるjavascriptメソッドを作成する必要があります：

var loader = {
    show: function() {
        $('#loader').show();
    },
    hide: function() {
        $('#loader').hide();
    }
};

loader.show()そうすれば、何かをロードしたいとき、そしてloader.hide()そのメッセージを却下したいときはいつでも簡単に言うことができます。

于 2012-05-15T19:55:32.917 に答える
1

いくつかの方法があります。$ajaxStartと$.ajaxStopを使用して画像/テキストコードをグローバルに読み込む方法は次のとおりです。

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

ロードするdivのIDがloadingDiv、テキストまたはロード中の画像のいずれかを含むと仮定します。

アップデート

$ .loadはjQueryの短縮メソッドであり、他のいくつかのメソッドと同様に、たとえば$ .post、$。get、$ getJSON、$。getScriptは内部で$.ajax関数を使用します。

$ .ajaxStartは、最初のajaxリクエストの開始時に実行されるコールバックを登録する方法であり、 $。ajaxStopは、すべてのajaxリクエストが完了したときに実行されるコールバックを登録するために同じ方法で使用されます。

したがって、上記のコードを使用して読み込み中のdivを表示および非表示にすると、$.load関数のajaxリクエストの開始時にテキスト/画像の読み込みが自動的に表示され、ajaxリクエストの完了時に非表示になります（そのページにメソッドが1つ$.ajaxまたは$.ajax省略されている場合）。

于 2012-05-15T19:57:26.830 に答える
0

JqueryBlockUIプラグインはニーズに最適です。

于 2012-05-15T19:55:25.880 に答える