Función Onload para llamar una API desde JSON

Question

Estoy llamando una API desde JSON de esta forma:

$(document).ready(function() {
    $('#btn-saldo').on('click', function() {
        if (CONDICIÓN)
        {
                $.ajax({
                url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
                type: 'GET',
                datatype: 'JSON',
            })
            .done(function(responseTwo) {
                var plata = responseTwo.saldoTarjeta;
                var fechaPlata = responseTwo.fechaSaldo;
                $( "#saldo" ).empty();
                $('#saldo').append(
                    "<div class='nav-saldo'>Saldo:</div>"+
                    "<div class='header-saldo'>" + plata + "</div>"+
                    "<div class='nav-saldo '>Saldo a la fecha: </div>"+
                    "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
            })
            .fail(function() {
              $( "#saldo" ).empty();
              $('#saldo').append(
              "<div class='nav-saldo'>Error</div>"+
              "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
            })
        }
        else
        {
            $( "#saldo" ).empty();
            $('#saldo').append(
            "<div class='nav-saldo'>Saldo:</div>"+
            "<div class='header-saldo'>" + tarjetaVacia + "</div>");
        }

    });

Resulta que para .done se demora como 5 segundos en hacer el llamado a la API y mostrar el resultado, por lo que me gustaría hacer una especie de onLoad, que muestre un Cargando, pero sé que no se pueden hacer onLoad sobre un <div>.

¿Qué solución me recomiendan?

A. Cedano · Answer 1 · 2017-08-17T21:37:39.767

Puedes tener un div que contenga la imagen y que estaría oculto por defecto por ejemplo:

<div id="cargando">
    <img style="width:100%" src="https://musicti.com/assets/images/upload-bar.gif" style="display: none;"/>
</div>

Vía jQuery lo muestras antes de iniciar la petición Ajax.

Lo puedes ocultar después del done.

// $(document).ready(function() { Deprecated 
$(function() 
{

    $('#btn-saldo').on('click', function() 
    {
        if (CONDICIÓN)
        {
          //Mostrar imagen cargando...
          $('#cargando').show(); 

            $.ajax({
            url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
            type: 'GET',
            datatype: 'JSON',
        })
            .done(function(responseTwo) 
             {
               //Ocultar cuando se haya completado
               $('#cargando').hide(); 
               var plata = responseTwo.saldoTarjeta;
               var fechaPlata = responseTwo.fechaSaldo;
               $( "#saldo" ).empty();
               $('#saldo').append(
                "<div class='nav-saldo'>Saldo:</div>"+
                "<div class='header-saldo'>" + plata + "</div>"+
                "<div class='nav-saldo '>Saldo a la fecha: </div>"+
                "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
               })
            .fail(function() 
             {
               $( "#saldo" ).empty();
               $('#saldo').append(
               "<div class='nav-saldo'>Error</div>"+
               "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
              })
           }
           else
           {
              $( "#saldo" ).empty();
              $('#saldo').append(
              "<div class='nav-saldo'>Saldo:</div>"+
              "<div class='header-saldo'>" + tarjetaVacia + "</div>");
            }

     });

Nota: He sustituido $(document).ready(function() { por $(function(), ya que el primero ha sido declarado obsoleto. Ver: jQuery 3 declaró document.ready obsoleto ¿hay cambios también para window.load?

score 0 · Answer 2 · answered Aug 17 '17 at 21:33

Podrías colocar dentro del if el siguiente código:

$('#id_div').html('<FONT COLOR="#000000">Cargando... </FONT><img src="imagen_simula_carga.gif"/>');

quedaría así:

if (CONDICIÓN)
{
    $('#id_div').html('<FONT COLOR="#000000">Cargando... </FONT><img src="imagen_simula_carga.gif"/>'); //agregas un mensaje y una imagen animada que se vea que esta cargando
    $.ajax({
        url: `http://bip-servicio.herokuapp.com/api/v1/solicitudes.json?bip=${numTarjetaSaldo}`,
        type: 'GET',
        datatype: 'JSON',
    })
    .done(function(responseTwo) {
        var plata = responseTwo.saldoTarjeta;
        var fechaPlata = responseTwo.fechaSaldo;
        $( "#saldo" ).empty();
        $('#saldo').append(
            "<div class='nav-saldo'>Saldo:</div>"+
            "<div class='header-saldo'>" + plata + "</div>"+
            "<div class='nav-saldo '>Saldo a la fecha: </div>"+
            "<div class='header-saldo div-nav'>"+ fechaPlata + "</div>");
        $('#id_div').html(''); //Se elimina lo que se estaba mostrando
    })
    .fail(function() {
      $( "#saldo" ).empty();
      $('#saldo').append(
      "<div class='nav-saldo'>Error</div>"+
      "<div class='header-saldo'> Lo sentimos =( <br> El número de tu Bip! no es valida.</div>");
    })
}

Función Onload para llamar una API desde JSON

2 Answers2