0

我正在进行 ajax 调用以获得更多结果并将它们附加到同一页面中的现有结果中。获取内容时，每次发送请求时我都需要显示一个滚动微调器。为了实现这一点，我继续在获取的结果底部添加一个 div，如下所示：

<div class="loader" style="display:block"></div>

我正在尝试使用以下代码显示微调器：

beforeSend: function() 
{
      $('#loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('#loader:last-child').html('');
}

但我无法获得微调器效果，它根本没有显示在页面上（虽然已获取结果）。

请帮助我纠正它。任何其他具有微调效果的想法也值得赞赏。

编辑：我已经删除了我的 perl 代码中的引号。对此感到抱歉。

4

7 回答 7

2

放一个空间<imgsrc，使其<img src

你的选择器应该是$('.loader:last-child')因为 loader 是一个类而不是一个 id。（使用.代替#）

于 2012-09-05T05:42:38.460 回答
1

无需添加任何新元素或图像，您只需在结果容器加载时添加一个类，然后使用该类添加填充和微调器图形作为容器的背景图像。加载完成后，删除类：

beforeSend: function(){
    $('#resultsContainer').addClass('loading');
}
complete: function(){
    $('#resultsContainer').removeClass('loading');
}

然后你的 CSS 可能看起来像：

#resultsContainer.loading {
    background: url(graphics/loading.gif) no-repeat center bottom;
    padding-bottom: 2em;
}

要获得额外的样式，请在 resultContainer 上的 padding-bottom 添加过渡，以便加载图形平滑地滑入和滑出。

于 2012-09-05T06:10:13.557 回答
0

你为什么用\斜杠

试试这个

beforeSend: function() 
{
      $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('.loader:last-child').html('');
}
于 2012-09-05T05:44:11.513 回答
0

试试这个

beforeSend: function() 
{
      $("#loader").last().html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $("#loader").last().html('');
}
于 2012-09-05T05:45:49.500 回答
0

你不需要转义引号，也可以在likespace之间放一个imgsrcimg src

正如rob在他的回答中提到的那样

您的选择器应该是$('.loader:last-child')因为 loader 是一个类而不是一个 id。使用句点(.)而不是(#)

,后面还要加逗号beforeSend: function(){},试试；

使用以下代码：

beforeSend: function() {
    $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
},

complete: function() {
      $('.loader:last-child').html('');
}
于 2012-09-05T05:51:49.003 回答
0

尝试将加载器图像附加到 e #loader 的 HTML 中，然后将其删除。（请注意，我在图像中添加了一个 id）

beforeSend: function() 
{
      $('.loader').append('<img src="/graphics/loading.gif" id="waitSpinner" alt="Wait" />');
}
complete: function()
{
      $('#waitSpinner').remove();
}

编辑：将#loader 更改为.loader，因为那是类。

于 2012-09-05T05:58:09.633 回答
0

您必须.用于选择类而不是#用于 id，并且,在 beforeComplete 和 Complete 之间也缺少。

于 2012-09-05T06:03:49.487 回答