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

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 中，通过分析请求，页面在 loader 之后开始加载，这是我不想要的。 任何想法，如何克服这个问题。

Answer 1

您将在 AJAX 请求完成之前删除“加载程序”。在 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 
        }
    });
});