0

次のスクリプトを使用してajaxリクエストを行いました...

 $.ajax({
 type: 'POST',
 url: 'load.php',
 data: 'page='+url,
 dataType: "html",
 beforeSend:function(){

 $('.left').html('<div class="ajax-load"><center><img    src="http://www.cadysalley.com/img/loader.gif" style="margin-top: 33px;" alt="Loading..." /></center></div>');
$('#ajax-load').show();
 },

 success:function(msg){
$('.left').empty();
// successful request; do something with the data
if(parseInt(msg)!=0)
        {

            $('html, body').animate({ scrollTop: 0 }, 0);
            $('.left').html(msg);
            $('#ajax-load').hide();
        }
  },
  error:function(){  

 $('.left').empty();
 $('#ajax-load').hide();
 }
});

私の問題は、リンクをクリックするたびにスピナーが起動し、アラートがポップアップした後、アラートがポップアップした後、新しいページが読み込まれない限り、Webサイト全体が数秒間一時停止することです。ウェブサイト全体がajax呼び出しで完全に読み込まれるまで、ウェブサイトを一時停止せずにスピナーの読み込みを続行します

4

2 に答える 2

0

ajax-load div を配置した div に新しいコンテンツを設定しています。

$('.left').html('<div class="ajax-load"><center><img    src="http://www.cadysalley.com/img/loader.gif" style="margin-top: 33px;" alt="Loading..." /></center></div>');

 $('.left').html(msg);
 $('#ajax-load').hide();

$('.left') コンテナーの外側に ajax-loader を配置する必要があります。

編集済み

ok do this. 
setTimeout(function() {
   $('.left').empty();
// successful request; do something with the data
if(parseInt(msg)!=0)
    {

        $('html, body').animate({ scrollTop: 0 }, 0);
        $('.left').html(msg);
        $('#ajax-load').hide();
    }
}, 100);

これでうまくいきます。

于 2012-06-15T05:30:25.237 に答える
0

これを試してください..ウェブサイトを完全にロードするには..('.left') divの前にもう1つdivを追加します..データがロードされるまで('.left')を隠します..それからajaxローダーを表示します..完全なデータは、ajax を非表示にして ('.left') を表示する ajax によって行われます。

このように..cssクラスを追加します

.hideIT{
visibility:hidden;      
}

beforeSend:function(){

 $('#newDiv').html('<div class="ajax-load"><center><img    src="http://www.cadysalley.com/img/loader.gif" style="margin-top: 33px;" alt="Loading..." /></center></div>');
$('.left').addClass('hideIT');
$('#ajax-load').show();
 },

 success:function(msg){
$('.left').empty();
// successful request; do something with the data
if(parseInt(msg)!=0)
        {

            $('html, body').animate({ scrollTop: 0 }, 0);
            $('.left').html(msg);
            $('#ajax-load').hide();
            $('.left').removeClass('hideIT');

        }
  },
于 2012-06-15T05:44:19.797 に答える