jQuery的页面加载器

Question

我在做什么是使用jQuery的'loader'。

基本上在选择一个选项后，网站会搜索数据库并返回匹配结果。所有这些都是在不刷新页面的情况下发生的。

我正在添加“加载程序” - 在网站从数据库加载数据时出现的图像，并且不知道从哪里开始。

有人可以给我一些线索，也许插件或只是指我的一些网站，有解决方案？

问候

Answer 1

只要把图像的加载指示器图像的地方网站上：

<img src="loader.gif" alt="" style="display:none" id="loader-indicator" /> 

然后用这个JavaScript来显示之前这一权利的Ajax调用火的，那么它完成后再次将其隐藏。

$('#loader-indicator').show(); 
$.ajax({ 
    url:'ma/url', 
    success: function(){ 
     $('#loader-indicator').hide(); 
    }, 
    error: function(){ 
     $('#loader-indicator').hide(); 
    } 
}); 

如果需要加载指针影像，我想尝试http://www.ajaxload.info/。但它似乎暂时不可用。

Answer 2

您既可以监视一个AJAX事件（http://docs.jquery.com/Ajax），如ajaxStart（http://docs.jquery.com/Ajax/ajaxStart）或ajaxComplete（http://docs.jquery.com/Ajax/ajaxComplete）和动作绑定到事件，如显示和隐藏。

$('#myLoaderImage').ajaxStart(function(){ 
    $(this).css('display', 'block'); 
}); 
$('#myLoaderImage').ajaxComplete(function(){ 
    $(this).css('display', 'none'); 
}); 

OR。你可以做到这一点。

$('#myLoaderImage').css('display','block'); 

$('#someDiv').load('somePage.html', function(){ 
    $('#myLoaderImage').css('display','none'); 
}); 

所以，你会做是显示加载您启动Ajax调用权之前，和隐藏在它的Ajax调用完成后获取运行的回调函数。第一种方法可能更好，因为您可以监视全局ajax事件并隐藏/显示任何ajax事件的加载器映像。