0

Buenas, tengo un envío POST a través de Ajax y mientras carga en el div escribo una frase de espera, sin embargo quiero cargar por una imagen (un gif si fuera posible).

¿Cuál sería la manera más sencilla de hacerlo? Gracias

 $.ajax({
            data:  {lat:lat,long:long,termidventa:termidventa,termidservicio:termidservicio, termname:termname, pventa:pventa, postventa:postventa}, 

            url:   '/wp-content/themes/starkers-html5-master/mostrar_paises.php', 
            type:  'post', 
            beforeSend: function () {
                    $("#caja21").html("Procesando, espere por favor...");
            },
            success:  function (response) { 

                    $("#caja21").html(response);
            }
    });
2
  • No cargues la imagen. La imagen ya esta alli. Solo hazla visible antes de llamar al ajax (Show) y ocultala en el success o fail (hide).
    – GDP
    Commented el 24 ene. 2018 a las 12:25
  • Podrias insertar codigo html cargando la imagen, o mostrando y ocultando un div mientras carga...
    – Oscar Cid
    Commented el 24 ene. 2018 a las 12:27

2 respuestas 2

0

Intenta mostrando la imagen antes de realizar el ajax y luego al finalizar, la ocultas.

Por ejemplo:

$("#cargando").show();
$("#listo").hide();
$.get("https://jsonplaceholder.typicode.com/comments",function(post){
  for(var i = 0;i<post.length;i++)
  {
    $("#posts").append("<li><p>" + post[i].email + "</p>" + post[i].body + "</li>");
    
     $("#cargando").hide();
    $("#listo").show();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cargando">
  <img
    width="200"
   src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
  <p>
    Cargando contenido
  </p>
</div>
<div id="contenido">
   <ul id="posts">
   </ul>
</div>

Fijate como muestra la imagen y despues de cargar el contenido, lo oculta.

0

No cargues la imagen. La imagen ya esta alli. Solo hazla visible antes de llamar al ajax (Show) y ocultala en el success o fail (hide).

$(document).ready(function(){
  $("#carga").hide();
});

function enviar(){
  $("#carga").show();
  $.ajax({
    url:   'https://httpbin.org/get', 
    type:  'get', 
    success:  function () { 
      $("#carga").hide();
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="carga" src="https://media1.tenor.com/images/83f824de4a72d3334ecb875e1ea894dd/tenor.gif?itemid=5521433" />
<button onclick="enviar()">ENVIAR</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.