Question

我正在使用jquery来淡化div，我动画变大，然后我使用ajax加载php文件。问题是ajax在div可见之前加载php文件并且动画足够大。因此，php页面显示在屏幕上，之后div加载它。我怎么能减慢PHP页面加载或在div可见后使其可见？ Toppi和链接是变量。 Toppi包含div的位置并链接php页面名称。

以下是我使用的代码：

$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);

if (links != '') {
    $.ajax({
        async:false,
        url: links,
        cache: false
    }).done(function( html ) {
        $("#riv1").html(html);
    });
}

我试过了

$("#riv1").delay(2000).html(html);

但这没有帮助。

Answer 1

尝试将ajax代码放在fadeIn（）的回调函数中：

$("#riv1").css("top", + toppi);
$("#riv1").fadeIn("slow",function(){
    if (links != '') {
        $.ajax({
            async:false,
            url: links,
            cache: false
        }).done(function( html ) {
            $("#riv1").html(html);
        });
    }
});
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500);

只有在fadeIn完成后才会调用ajax函数。

Answer 2

您可以使用函数

在jquery ajax请求之前显示加载图像

beforeSend ，可以在成功时隐藏加载图片，如下所示

    $.ajax({
    beforeSend:function(){
    //you logic to add the loading image inside the div
    }
    async:false,
    url: links,
    cache: false
    }).done(function( html ) {
              //Hide the images or replace the div with new content
        $("#riv1").html(html);
  });

Answer 3

$("#riv1").css("top", + toppi);
$("#riv1").fadeIn();
$("#riv1").animate({height:'600px',opacity:'0.4'},"fast");
$("#riv1").animate({width:'850px',opacity:'0.8'},"fast");
$("#riv1").animate({opacity:'1.0'}, 500,function(){
//calling ajax after animation completed 
   if (links != '') {
   $.ajax({
      async:false,
      url: links,
      cache: false
   }).done(function( html ) {
      $("#riv1").html(html);
  });
}
});

在最终动画完成后尝试进行ajax调用

快乐编码：）

如何减慢页面加载到div？

3 个答案: