Question

我正在进行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代码中的引号。对不起。

Answer 1

在<imgsrc中放置一个空格，使其<img src

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

Answer 2

您可以在加载时将结果容器添加到结果容器中，而不是添加任何新元素或图像，并使用类添加填充和微调器图形作为容器的背景图像。加载完成后，删除类：

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，以便加载图形可以顺畅地滑入和滑出。

Answer 3

为什么使用\斜杠

试试这个

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

Answer 4

试试这个

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

Answer 5

您无需转义引号，也可以在space imgsrc之间加img src

抢劫在他的answer中提到

你的选择器应该是 $（'。loader：last-child'），因为loader是一个不是id的类。使用pereiod （。）而不是（＃）

在,之后添加逗号beforeSend: function(){},并尝试;

使用以下代码：

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

complete: function() {
      $('.loader:last-child').html('');
}

Answer 6

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

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

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

Answer 7

您必须使用.来选择不是#的类作为ID，并且在之前的完成和完成之间也缺少,。

启用同一类的最后一个div

7 个答案: