Question

我想做的是使用jQuery称为'loader'的东西。

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

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

有人可以给我一些线索，可能是插件还是只是推荐给一些有解决方案的网站？

此致

Answer 1

只需在网站上的某处放置带有加载指示图像的图像：

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

然后使用此javascript在Ajax调用fire之前显示此内容，然后在完成后再次隐藏它。

$('#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）并将操作绑定到该事件，例如show和隐藏。

$('#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事件的加载器图像。

使用jQuery的页面加载器

2 个答案: