ローダーを表示して非表示にすると、より多くの投稿を表示できますか？

Question

ユーザーがクリックしたときにローダーを表示するにはどうすればいいですか？投稿が正常に読み込まれた後、多くの投稿が読み込まれて非表示になります。それから私は、あなたは、再び、ユーザが負荷より投稿ボタン

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

<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>

Answer 1

私は、これはあなたを助けることを願っています。そこが行われ

<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(); 
     }); 
    }); 
}); 

に、&常に方法を失敗も、あなたが記事をロードするにはどうすればよい

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

Answer 2

をクリックしたときに、私はポストがロードされているかわからないが、私はあなたがボタンをクリックすると仮定し、ローダを表示したいですサーバーへのAJAXリクエストを起動すると、サーバーはポストを返します。コールバック関数でローダーを非表示にするだけです。

はJQuery：

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