Question

如何在用户点击加载更多帖子按钮时显示加载程序，并且在帖子加载成功后加载更多帖子并隐藏它。然后我想再次显示加载器，当用户点击加载更多帖子按钮

＆＃13;

$("#lmb").click(function(e) {
  $('#lmi').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="lmb" type="button" style="background-color: #f44336;width:98%;border-radius:6px;border:2px solid #4a235a;">Load More Posts <img src="http://www.nvidia.com/docs/IO/151309/loader.gif" width="2%" height="2%" id="lmi" style="display:none;"></button>

＆＃13;

Answer 1

我不知道这些帖子是如何加载的，但我想当你点击按钮时，你向服务器发起一个AJAX请求，服务器返回帖子...所以你只需要隐藏加载器在回调函数中。

JQuery的：

$.ajax("where/I/get/posts.php", {
    method: get,
    //more options
    success: function(response) {
        //add posts
        $('#lmi').hide();
    }
}

Answer 2

我希望这会对你有所帮助。

<button id="lmb" type="button" style="background-color: #f44336;width:98%;border-radius:6px;border:2px solid #4a235a;">Load More Posts 
  <img id="loader" src="http://www.nvidia.com/docs/IO/151309/loader.gif" width="2%" height="2%" id="lmi" style="display:none;">
</button>

jQuery post方法

$(document).ready(function(){
    $("#lmb").click(function(){
        $('#loader').show();
        $.post( "URL", function( data ) {
         $('#loader').hide();
      }); 
    });
});

已经完成，失败＆amp;总是方法你也可以处理它

var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

如何显示和隐藏加载程序以显示更多帖子？

2 个答案: