¿Cómo mostrar la carga del hilandero en jQuery?

spinner prototypejs

Question

En Prototype puedo mostrar una imagen "cargando ..." con este código:

var myAjax = new Ajax.Request( url, {method: ''get'', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

En jQuery , puedo cargar una página de servidor en un elemento con esto:

$(''#message'').load(''index.php?pg=ajaxFlashcard'');

pero ¿cómo adjunto un spinner de carga a este comando como lo hice en Prototype?

Answer 1

JavaScript

$.listen(''click'', ''#captcha'', function() {
    $(''#captcha-block'').html(''<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />'');
    $.get("/captcha/new", null, function(data) {
        $(''#captcha-block'').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

Answer 2

Además de establecer valores predeterminados globales para eventos ajax, puede establecer el comportamiento para elementos específicos. ¿Tal vez con solo cambiar su clase sería suficiente?

$(''#myForm'').ajaxSend( function() {
    $(this).addClass(''loading'');
});
$(''#myForm'').ajaxComplete( function(){
    $(this).removeClass(''loading'');
});

Ejemplo CSS, para ocultar #myForm con un spinner:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the ''loading'' element */
.loading * {
    display: none;  
}

Answer 3

Creo que tienes razón. Este método es demasiado global ...

Sin embargo, es un buen valor predeterminado para cuando su llamada AJAX no tiene efecto en la página en sí. (Guardar fondo, por ejemplo). (siempre puede desactivarlo para una determinada llamada ajax pasando "global": false - consulte la documentación en jquery

Cuando la llamada AJAX está destinada a actualizar parte de la página, me gusta que mis imágenes de "carga" sean específicas de la sección actualizada. Me gustaría ver qué parte se actualiza.

Imagina lo genial que sería si pudieras simplemente escribir algo como:

$("#component_to_refresh").ajax( { ... } ); 

Y esto mostraría una "carga" en esta sección. A continuación hay una función que escribí que maneja la visualización de "carga" también, pero es específica del área que estás actualizando en ajax.

Primero, déjame mostrarte cómo usarlo.

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({''url'':"/my/url", load:true, global:false});
 })

Y esta es la función: un inicio básico que puede mejorar como desee. es muy flexible

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html(''<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>'');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Answer 4

Esta es la mejor manera para mí:

jQuery :

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

Café

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

Docs: ajaxStart , ajaxStop

Answer 5

Este es un complemento muy simple e inteligente para ese propósito específico: https://github.com/hekigan/is-loading

Answer 6

Hago esto:

var preloaderdiv = ''<div class="thumbs_preloader">Loading...</div>'';
           $(''#detail_thumbnails'').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:''./Ajaxification/getRandomUser?top=''+ $(sender).css(''top'') +''&lef=''+ $(sender).css(''left''),
                        success:function(data){
                            $(''#detail_thumbnails'').html(data);
                        }
             });

Answer 7

Hay un par de maneras. Mi forma preferida es adjuntar una función a los eventos ajaxStart / Stop en el propio elemento.

$(''#loadingDiv'')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Las funciones ajaxStart / Stop se activarán cada vez que haga alguna llamada Ajax.

Actualización : a partir de jQuery 1.8, la documentación indica que .ajaxStart/Stop solo debe adjuntarse al document . Esto transformaría el fragmento anterior a:

var $loading = $(''#loadingDiv'').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Answer 8

He utilizado lo siguiente con jQuery UI Dialog. (Tal vez funciona con otras devoluciones de llamada ajax?)

$(''<div><img src="/i/loading.gif" id="loading" /></div>'').load(''/ajax.html'').dialog({
    height: 300,
    width: 600,
    title: ''Wait for it...''
});

El contiene un gif de carga animado hasta que su contenido se reemplaza cuando finaliza la llamada ajax.

Answer 9

Mi código ajax se parece a esto, en efecto, acabo de comentar async: false line y aparece el spinner.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $(''#ajaxspinner'').hide();
        }
      });

Estoy mostrando el spinner dentro de una función antes del código ajax:

$("#MyDropDownID").change(function () {
        $(''#ajaxspinner'').show();

Para Html, he usado una fuente de clase impresionante:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Espero que ayude a alguien.

Answer 10

Para jQuery utilizo

jQuery.ajaxSetup({
  beforeSend: function() {
     $(''#loader'').show();
  },
  complete: function(){
     $(''#loader'').hide();
  },
  success: function() {}
});

Answer 11

Puede insertar la imagen animada en el DOM justo antes de la llamada AJAX, y hacer una función en línea para eliminarlo ...

$("#myDiv").html(''<img src="images/spinner.gif" alt="Wait" />'');
$(''#message'').load(''index.php?pg=ajaxFlashcard'', null, function() {
  $("#myDiv").html('''');
});

Esto asegurará que su animación comience en el mismo cuadro en las solicitudes posteriores (si eso importa). Tenga en cuenta que las versiones anteriores de IE pueden tener dificultades con la animación.

¡Buena suerte!

Answer 12

Si estás usando $.ajax() puedes usar algo como esto:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: ''POST'', dataType: ''json''
    });  

Answer 13

Si no quieres escribir tu propio código, también hay muchos complementos que hacen eso:

• github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 14

Si planea usar un cargador cada vez que realiza una solicitud de servidor, puede usar el siguiente patrón.

 jTarget.ajaxloader(); // (re)start the loader
 $.post(''/libs/jajaxloader/demo/service/service.php'', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Este código en particular usa el complemento jajaxloader (que acabo de crear)

https://github.com/lingtalfi/JAjaxLoader/

Answer 15

Siempre puedes usar el plugin Block UI jQuery que hace todo por ti, e incluso bloquea la página de cualquier entrada mientras se carga el ajax. En caso de que el complemento no haya funcionado, puedes leer sobre la forma correcta de usarlo en esta respuesta. Echale un vistazo.

Answer 16

Simplemente puede asignar una imagen del cargador a la misma etiqueta en la que más tarde cargará el contenido utilizando una llamada Ajax:

$("#message").html(''<span>Loading...</span>'');

$(''#message'').load(''index.php?pg=ajaxFlashcard'');

También puede reemplazar la etiqueta span con una etiqueta de imagen.

Answer 17

Simplemente puede usar la función .ajax de jQuery y usar su opción antes de beforeSend y definir alguna función en la que pueda mostrar algo como un div de cargador y, en caso de éxito, puede ocultar ese div de cargador.

jQuery.ajax({
    type: "POST",
    url: ''YOU_URL_TO_WHICH_DATA_SEND'',
    data:''YOUR_DATA_TO_SEND'',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Puedes tener cualquier imagen de Spinning Gif. Aquí hay un sitio web que es un excelente generador AJAX Loader según su esquema de color: http://ajaxload.info/

Answer 18

También quiero contribuir a esta respuesta. Estaba buscando algo similar en jQuery y esto es lo que finalmente terminé usando.

Obtuve mi spinner de carga de http://ajaxload.info/ . Mi solución se basa en esta respuesta simple en http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Básicamente, su marca HTML y CSS se verían así:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

Y luego el código para jQuery se vería algo así:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert(''error'');
          });
     });
</script>

Es tan simple como eso :)

Answer 19

Tenga en cuenta que debe usar llamadas asíncronas para que funcionen los giradores (al menos eso fue lo que hizo que el mío no se mostrara hasta después de la llamada ajax y luego desapareció rápidamente a medida que la llamada había terminado y retirado el girador).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: ''JSON'',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: ''application/json'',
        contentType: ''application/json'',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

Answer 20

Terminé con dos cambios a la respuesta original .

1. A partir de jQuery 1.8, ajaxStart y ajaxStop solo deben adjuntarse al document . Esto hace que sea más difícil filtrar solo algunas de las solicitudes ajax. Soo ...
2. Al cambiar a ajaxSend y ajaxComplete es posible realizar una ajaxComplete con la solicitud actual de ajax antes de mostrar el control de giro.

Este es el código después de estos cambios:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Answer 21

Utilice el complemento de carga: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:''loading.gif''});

Answer 22

Variante: tengo un icono con id = "logo" en la parte superior izquierda de la página principal; un gif de giro se superpone en la parte superior (con transparencia) cuando ajax está funcionando.

jQuery.ajaxSetup({
  beforeSend: function() {
     $(''#logo'').css(''background'', ''url(images/ajax-loader.gif) no-repeat'')
  },
  complete: function(){
     $(''#logo'').css(''background'', ''none'')
  },
  success: function() {}
});

Answer 23

$(''#loading-image'').html(''<img src="/images/ajax-loader.gif"> Sending...'');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $(''#loading-image'').html('''');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $(''#loading-image'').html(''<span style="color:red">''+text +''  </span>'');

            }
        });

Answer 24

$(''#message'').load(''index.php?pg=ajaxFlashcard'', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback