Load an image while running an Ajax

Question

Load an image while running an Ajax

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good, I have a POST sending through Ajax and while I am loading the div I write a waiting phrase, however I want to upload it for an image (a gif if possible).

What would be the easiest way to do it? Thanks

 $.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);
            }
    });

javascript ajax web

asked by Javier Ramos 24.01.2018 в 13:24

source

2 answers

0

Do not load the image. The image is already there. Just make it visible before calling ajax (Show) and hide it in the success or 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>

answered by 24.01.2018 в 13:38

How to remove two last elements of an array in this example Validate the length of an input with Javascript [closed]

score 0 · Accepted Answer

Try showing the image before performing the ajax and then at the end, you hide it.

For example:

$("#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>

See how the image shows and after loading the content, hide it.