¿Cómo muestro el cargador cuando un usuario hace clic en el botón cargar más publicaciones y se cargan más publicaciones y lo oculto después de que las publicaciones se hayan cargado correctamente? Luego quiero volver a mostrar el cargador cuando el usuario haga clic en el botón Cargar más publicaciones

$("#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>
0
Tarun Jain 13 nov. 2017 a las 19:40

2 respuestas

La mejor respuesta

Espero que esto te ayude.

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

Método de publicación jQuery

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

Hay métodos hechos, fallados y siempre, también puedes manejarlo

var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
0
Kalaikumar Thangasamy 13 nov. 2017 a las 17:59

No sé cómo se cargan las publicaciones, pero supongo que cuando haces clic en el botón, lanzas una solicitud AJAX al servidor y el servidor devuelve las publicaciones ... Así que solo necesitas ocultar el cargador en la función de devolución de llamada.

Jquery:

$.ajax("where/I/get/posts.php", {
    method: get,
    //more options
    success: function(response) {
        //add posts
        $('#lmi').hide();
    }
}
0
legomolina 13 nov. 2017 a las 17:57