it-swarm-es.com

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

En Prototipo Puedo mostrar una imagen de "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?

388
Edward Tanguay

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 a document. Esto transformaría el fragmento anterior a:

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

Para jQuery utilizo

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

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

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 gran AJAX Generador de cargador según su esquema de color: http://ajaxload.info/

37
Seeker

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

$("#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 podrían tener dificultades con la animación.

¡Buena suerte!

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

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

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

20
Brent

Si está usando $.ajax() puede 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'
    });  
15
Amin Saqi

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

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

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() {}
});
8
Paul

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

7
Brendan Vogt

Terminé con dos cambios a la respuesta original .

  1. A partir de jQuery 1.8, ajaxStart y ajaxStop solo deben adjuntarse a document. Esto hace que sea más difícil filtrar solo algunas de las solicitudes ajax. Soo ...
  2. Cambiar a ajaxSend y ajaxComplete hace que sea posible realizar una intersección con la solicitud de ajax actual antes de mostrar la flecha giratoria.

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();
    })
7
Emil Stenström

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.

7
Umesh kumar

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;  
}
6
LeeGee
$('#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>');

            }
        });
4
Izabela Skibinska

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                
        }
    });
3
Shane Rowatt

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.

2
Quinn Comendant

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; }
2
Jerry

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

2
Fred K

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

2
andcl

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/

1
ling

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

1
keithhackbarth

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);
                        }
             });
1
user968652

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 se muestra una función que escribí que maneja la visualización de "carga", pero es específica del área que está 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);
};
1
guy mograbi

Mi código ajax tiene este aspecto, 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.

1
Jaggan_j

Siempre puede usar Bloquear UI jQuery plugin que hace todo por usted, 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 acerca de la forma correcta de usarlo en esta respuesta. Echale un vistazo.

0
SamyCode