Question

我正在使用jquery中的Ajax加载函数来加载DOM中的另一个页面。通过使用此

$('.upload').on('click',function(){

 $('.content').load('loo.php');

});

当我使用此时，分区内容中的页面在3-4秒间隔后加载。

我想使用该间隔显示进度条，所以我使用这种方式

$('.upload').on('click',function(){

       $.ajax({
           url: 'loo.php',
         beforeSend:function(){

           res.container.append(res.loader); //Showing loader

         },
         success:function(){

            $('.content').load('loo.php');
             res.container.find(res.loader).remove(); //Hiding Loader 

               }

       });

});

所以现在发生的事情是，加载器出现并显示几次，然后分页加载页面，但问题是我再次看到加载器隐藏后的页面加载延迟。我创建了装载机以克服时间，但是，在装载机运行后仍然需要一些时间。

在firebug中，通过分析请求，页面开始在加载器之后加载，这是我不想要的。任何想法，如何克服这个问题。

Answer 1

您在AJAX请求完成之前删除了“loader”。在load（）完成后，你应该在回调函数中删除加载器。也不需要双AJAX请求。

$('.upload').on('click',function(){
   res.container.append(res.loader); //Showing loader
  $('.content').load('loo.php', function(){
             res.container.find(res.loader).remove(); //Hiding Loader 

    });
});

Answer 2

load()和ajax()都执行ajax调用，这可能不是你想要做的。试试这个：

$('.upload').on('click',function() {
    $.ajax({
        url: 'loo.php',
        beforeSend: function() {
            res.container.append(res.loader); //Showing loader
        },
        success: function(data) {
            // add the content to the DOM instead of loading it again
            $('.content').html(data); 
            res.container.find(res.loader).remove(); //Hiding Loader 
        }
    });
});

两个网页Ajax加载存在一定矛盾的案例

2 个答案: