jQuery在Ajax完成加载后执行加载消息！

问题描述：

我尝试在进行ajax调用之前显示ajax loader gif。 Firefox是唯一按顺序执行此操作的浏览器。所有其他浏览器先完成ajax调用，然后显示加载器。

此代码：

$(#element).click(function(evt){ 

    tmp_eleX = $this.offset().left; // get current left position of element 
    tmp_eleY = $this.offset().top; // get current top position of element 

    $('#ajax_loader').css({top: tmp_eleY-208}); // show ajax loader which was placed outside viewable area (-9999) 

    $.ajax({ 
    url: "some_file.cfm", 
    cache: false, 
    dataType: "html", 
    async: false, // wait for loading to finish before continuing code 
    timeout: 30000, 
    error: function(){ 
     return true; 
    }, 
    success: function(data) { 
     $('#someelementtoinject_ajaxdata').html(data); 
    } 
    });       

    $('#ajax_loader').css({top: -9999}); // move ajax loader off screen - for testing i comment out this line to see when the loader shows! 

});

这是巴蒂推动我。我试着包装Ajax调用在

window.setTimeout(function(){ 
}, 0);

阿贾克斯装载机展现在所有浏览器中的Ajax调用，问题的GIF动画不是动画，直到阿贾克斯完成加载的东西之前！

我也试过：

$('#ajax_loader') 
    .ajaxStart(function() { 
     $(this).css({ 
     top: -208 
     }) 
    }) 
    .ajaxStop(function(){ 
     $(this).css({ 
     top: -1000       
     }) 
    });

同样的结果阿贾克斯.ajaxStart触发之前完成了，心里很不舒服：/！在这里，只有Firefox能够正常工作并在ajax调用之前显示动画。

似乎在所有浏览器中工作的唯一方法是设置ajax调用'async：true'。在继续之前加载ajax是非常重要的，并且可能触发页面上的另一个Ajax调用。

关于如何在ajax完成之前触发加载器的任何想法？在代码继续之前，还需要完成ajax。

我没想到这个@^& ^＃@我的大脑出血：/

为什么在调用ajax调用中的“成功”或“完成”之前将装载程序移出屏幕？ – justkt 2011-03-29 15:23:40

我认为这是没有dom操纵的最快方法。加载程序元素已经存在。我这样做很自然。取决于哪个元素被点击过，加载器在屏幕上有不同的位置，触发位置改变似乎是最好的解决方案。但考虑到我的结果和问题，我完全接受其他建议。 – PixelGrinch 2011-03-29 15:27:09

你不应该移动你的装载机，直到你完成了ajax，否则它会在屏幕上和屏幕之外快速闪烁。 – justkt 2011-03-29 15:53:15

答

async: false, // wait for loading to finish before continuing code

这似乎是你的问题 - 你是不是使得AJAX调用异步，因此（我猜测），控件没有返回到浏览器，所以它在AJX调用返回之前无法响应'show the gif'动作。真：

我以为把它放在一个setTimeout包装将有所帮助，它做了，但gif动画不是动画。是否有另一种方法来检查负载是否已完成，以便后续正常工作？ – PixelGrinch 2011-03-29 15:32:03

最简单的解决方案是异步执行AJAX调用（毕竟，这就是AJAX的'A'所代表的意思）。但是，如果您希望阻止用户表单在执行AJAX调用时执行其他操作，则会引入问题。这完全取决于您如何看到应用程序进度的工作流程。 – belugabob 2011-03-30 11:58:58

答

感谢您的快速解答...

我加入一个全局变量这也使其成为一个选项，以把异步解决了这个问题。我把全局标志设置为ajax调用成功函数中的最后一个动作。

jQuery在Ajax完成加载后执行加载消息！

相关推荐