Question

我创建了以下代码，以便通过load()检索搜索结果。我遇到的麻烦是，在ajaxed结果出现在DOM之前，加载的回调函数会触发。有时候时间似乎是正确的，但通常会提前一秒钟。

  // assign area to load content
  var mainContent = $("#ajaxContent");

  // on form change
  $('#facets').change(function(e){

    // serialize form data
    var formData = $("#facets").serialize();

    // fade in loading animation while fade out page
    $('#preload').fadeIn();
    $('.wrap').fadeTo("fast", 0.33);

    // ajax search results, on callback fade out animation, fade in page
    mainContent.load('?' + formData + ' #ajaxContent', function(){
       $('.wrap').fadeTo("fast", 1);
       $('#preload').fadeOut();
    });

    e.preventDefault();
  });

有任何明显的错误吗？谢谢！

Answer 1

听起来你想要淡化加载指示器，加载内容，然后将其淡出。但正如您所写，您正在同时启动fadeIn动画和异步加载。首先完成的是任何人的猜测。

fadeIn在完成动画时接受回叫。在回调中触发你的ajax加载：

$('.wrap').fadeTo("fast", 0.33);
$('#preload').fadeIn(function() {

    // ajax search results, on callback fade out animation, fade in page
    mainContent.load('?' + formData + ' #ajaxContent', function(){
       $('.wrap').fadeTo("fast", 1);
       $('#preload').fadeOut();
    });
});

这会使事情按照你想要的顺序发生。

Answer 2

这里最好的情况是立即启动ajax请求，然后显示预加载器。当ajax完成时，停止在预加载器中淡入并显示包装。

$('.wrap').fadeTo('fast', 0.33);
$('#preload').fadeIn();
$.get('?' + formData).done(function (html) {
    $('<div>').html(html).find('#ajaxContent').appendTo(mainContent);
}).always(function () {
    $('#preload').stop().fadeOut();
    $('.wrap').stop().fadeTo('fast', 1);
});

这会导致请求和显示内容尽可能快，同时仍然有预加载器，如果它需要足够长的时间来显示。

猜猜你还可以使用.load：

$('.wrap').fadeTo('fast', 0.33);
$('#preload').fadeIn();
mainContent.load('?' + formData + ' #ajaxContent', function () {
    $('#preload').stop().fadeOut();
    $('.wrap').stop().fadeTo('fast', 1);
});

jQuery .load（）回调很早就开始了

2 个答案: