0

このコードに問題があります。要するに: 私は 4 つのリンクを持つメニューを持つ小さな Web ページを持っています: すべてのリンクは、jquery ロード関数を使用して、「ターゲット」と呼ばれる div にページ コンテンツをロードします。ページにフェードインとフェードアウト効果を追加しました。問題は、ロードするコンテンツがたくさんある巨大なページがある場合です。そのため、「ターゲット」div と js スクリプト内のコードにオーバーレイと小さなプリローダー gif を配置する必要がありますが、方法がわかりません。 . 誰か助けてくれませんか？ありがとう..

ここでjs関数：

google.load('jquery', '1.4.2');
google.setOnLoadCallback(function(){

$('.nav a').click(function() {
    $('.nav a').removeClass('selected');
    $(this).addClass('selected');
});

$('#link1').click(function() {
    $('#target').fadeOut('fast', function() {
        $('#target').load('content/1.html', function() {
            $('#target').fadeIn('slow');
        });
    });
});

$('#link2').click(function() {
    $('#target').fadeOut('fast', function() {
        $('#target').load('content/2.html', function() {
            $('#target').fadeIn('slow');
        });
    });
});
4

1 に答える 1

1

、 jQueryAjax request is about to be sentは、他に未解決のAjaxリクエストがあるかどうかをチェックします。進行中のものがない場合は、jQuery triggers the ajaxStart event。

この時点で、.ajaxStart（）メソッドに登録されているすべてのハンドラーが実行されます。

ajaxローダーのcssクラス

.preload{
  background:url('your gif loader image path') center no-repeat;
}

次に、このjqueryがプリロードを実行します。

$('body').ajaxStart(function() {
   $('.overlay').css({"background":"black","opacity":"0.7"}).show().addClass('preload');
});

私はあなたがajaxリクエストが起こったときにページまたは特定の領域をカバーする透明なオーバーレイdivを持っていると仮定しました、ここで私はpreloadを持っているという名前のクラスを追加していbackground gif image of ajaxloaderます。

于 2012-12-05T16:49:26.533 に答える