En Prototipo puedo mostrar un «cargando…» de la imagen 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 puedo adjuntar un círculo de carga para este comando como yo lo hice en el Prototipo?

24 Comentarios

  1. 775

    Hay un par de maneras. Mi forma preferida es asociar una función a la ajaxStart/Stop eventos en el mismo elemento.

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

    La ajaxStart/funciones de Parada se activará cada vez que se hace alguna de las llamadas Ajax.

    Actualización: Como de jQuery 1.8, la documentación indica que .ajaxStart/Stop sólo debe ser conectado a document. Este iba a transformar el anterior fragmento de código:

    var $loading = $('#loadingDiv').hide();
    $(document)
      .ajaxStart(function () {
        $loading.show();
      })
      .ajaxStop(function () {
        $loading.hide();
      });
    • Eso es probablemente demasiado global para una simple cargar en un DIV.
    • demasiado global? cuántos diferentes «por favor espere» mensajes ¿quieres?
    • de esta manera, lamentablemente no se puede controlar la carga de div posicionamiento en caso de que no quieras mostrar sólo un referente de la carga de la ventana, pero muestran que cerca del elemento de espera para que el contenido ajax para ser cargado en…
    • ajaxStart y ajaxStop son eventos de jQuery así que usted puede de espacio de nombres de ellos: stackoverflow.com/questions/1191485/… docs.jquery.com/Namespaced_Events
    • Esto es muy claro, +1! @glaz666 – Eso no es cierto. Es todo acerca de cómo configurar. Por ejemplo: .ajaxStart(function(e) { CallFunctionWithTargettedElement(e.currentTarget); }) va a llamar a una función donde el argumento es el elemento que inicia la llamada ajax. Tenga en cuenta que esto es sólo un ejemplo de la manipulación de si el ajax fue llamado desde un script sin necesidad de un controlador de eventos o cualquier otra comprobación de error alguno. Es simplemente para mostrar que hay formas de controlar el posicionamiento. La llamada de la función puede colocar un absoluto elemento más de la llamada elemento.
    • Esto funciona para mí, sólo la primera vez que me desencadenar la consulta, la segunda y la próxima vez que la animación no se muestran. alguna idea?
    • sólo se activa cuando una petición ajax se inicia y no hubo peticiones ajax todavía activo.
    • Si el uso de jQuery >= 1.9, adjuntar el ajaxStart y ajaxStop eventos a $(document). jquery.com/upgrade-guide/1.9/…
    • Si usted necesita para mostrar sólo el número en algunos de los eventos (y todavía ser compatible con jQuery 1.8+, usted debe utilizar ajaxSend y ajaxComplete: stackoverflow.com/a/15763341/117268
    • puede actualizar esta mostrando jQuery >= 1.9 sólo debe ser conectado a documento … no podía ver los comentarios de otros hasta que regresó, pero terminó la depuración de mí mismo para averiguar … pensé que podría ayudar a alguien más, si ven esto y no haga clic en mostrar más comentarios …
    • En el jquery doc página, dice: >= 1.8 sólo debe adjuntar al documento, no 1.9. api.jquery.com/ajaxStart «Como de jQuery 1.8, el .ajaxStart() método sólo debe ser conectado a un documento.»
    • jQuery hide() y show() el juego de funciones css display prpoerty a ninguno, y de bloque. Esto afecta a la postioning de otros elemnts en la página. En efecto hace el salto de página, parpadeo, y tal vez incluso completamente rompe el diseño.
    • un icono de carga sugiere que el usuario debe esperar… el punto de ajax es así que el usuario tiene que esperar menos… así que sí, simplemente conectándolo a la genérica ajax eventos de inicio y detención es demasiado global en general
    • clean & sucinta respuesta, fue capaz de hacer que el concepto de trabajo en el plazo de menos de 3 minutos. Thankss.

  2. 203

    Para jQuery yo uso

    jQuery.ajaxSetup({
      beforeSend: function() {
         $('#loader').show();
      },
      complete: function(){
         $('#loader').hide();
      },
      success: function() {}
    });
    • a mí me funciona, el código html debe tener algo como: <div id=’loader’><img src=»spinner.gif»/></div>
    • Este era más limpio para mí. En lugar de ajaxSetup, coloqué beforeSend: y completa: dentro de los $ajax({… declaración.
    • No sé lo que vale, pero jQuery se menciona en la documentación que el uso de .ajaxSetup() no es recomendable. enlace
    • Tenga en cuenta que beforeSend se llama antes de cada llamada, mientras que ajaxStart se activa sólo cuando la antes ajax método es llamado. De la misma manera por ajaxStop, es llamado cuando el el último llamada ajax acabados. Si usted tiene más de uno de solicitudes simultáneas, el fragmento de código en esta respuesta no funcionará correctamente.
    • No me funciona si la llamada ajax veces (Firefox 28 para Mac).
    • ajaxSetup es como la configuración general para ajax reauests

  3. 40

    Puedes usar el jQuery .ajax la función y el uso de su opción de beforeSend y definir la función en la que se puede mostrar algo como un gestor de div y en el éxito de la opción puede ocultar que el cargador de div.

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

    Que puede tener cualquier Girar imagen en formato Gif. Aquí es un sitio web que es un gran AJAX Loader Generador de acuerdo a su esquema de color: http://ajaxload.info/

    • El success no será llamado si hay un error, pero «siempre recibirá una complete de devolución de llamada, incluso para las solicitudes sincrónicas», según jQuery Ajax Eventos.
  4. 22

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

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

    Esto hará que la animación se inicia en el mismo marco en solicitudes posteriores (si lo que importa). Tenga en cuenta que las versiones antiguas de IE podría tiene dificultades con la animación.

    Buena suerte!

    • Top tip: el Preload spinner.gif en un div con display establecido ninguno. De lo contrario, usted podría obtener un poco de retraso spinner efecto como la ruleta todavía descargas.
    • buen tip, mucho más sencilla que usando otro plugin
    • Bueno! pero querido , una cosa más que quiero mostrar spinner durante 2 segundos, incluso la página que ya se ha cargado.
    • Debido a que la gente disfrute de esperar que las cosas…?
  5. 20
    $('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
    showLoad();
    
    function showResponse() {
        hideLoad();
        ...
    }

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

    • Usted podría tener problemas de tiempo allí, ¿no?
    • Creo que se equivocó. ¿Por qué es showLoad() no es una devolución de llamada? JavaScript se carga el contenido de forma asincrónica. showLoad() va a trabajar incluso antes de que el contenido se carga si estoy en lo cierto.
    • Yo uso un método similar demasiado y que en realidad se basa en llamadas asincrónicas. Me gustaría lugar showLoad en algún lugar antes de la llamada de ajax, pero el punto es mostrar un spinner, vamos a JS iniciar la llamada, y matar a la ruleta en una devolución de llamada después de que el AJAX se ha completado.
  6. 15

    Si usted 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'
        });  
  7. 10

    El uso de la carga del plugin: http://plugins.jquery.com/project/loading

    $.loading.onAjax({img:'loading.gif'});
    • Un plugin para esta tarea tan sencilla? Que realmente no es una buena solución es? Que quiere de carga de 100 scripts en una página?
    • ¿Qué es un «buen» número de plugins? 99? 48? 7?
    • De acuerdo. Comprimir y concatenar, si quieres un mejor rendimiento.
    • En desacuerdo: independiente y modularise, reutilización de código, si usted quiere ser capaz de mantener su trabajo y tienen a los demás a hacerlo también. Cuál es la probabilidad de que el usuario tenga una mala conexión de su cliente no se puede cargar un plugin así como su código?
    • Otra buena opción… github.com/keithhackbarth/jquery-loading
    • El enlace está muerto
    • Así es la biblioteca
    • «Lo que la probabilidad de que el usuario tenga una mala conexión de su cliente no se puede cargar un plugin así como su código?» Bastante bueno diría yo.

  8. 8

    Variante: tengo un icono con id=»logo» en la parte superior izquierda de la página principal; un spinner gif, a continuación, superpuesto en la parte superior (con transparencia) cuando el ajax está trabajando.

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

    Terminé con dos cambios en el respuesta original.

    1. Como de jQuery 1.8, ajaxStart y ajaxStop sólo debe ser conectado a document. Esto hace que sea más difícil para filtrar sólo algunas de las peticiones ajax. Soo…
    2. Cambiar a ajaxSend y ajaxComplete hace posible interspect la actual petición ajax antes de mostrar el girador.

    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();
        })
    • Bonito solución. ajaxComplete parece a fuego prematuramente cuando las solicitudes de reintento, así que he usado una combinación de ajaxSend y ajaxStop y funciona muy bien.
    • Hay otros temas que responder a esa pregunta, utilice la búsqueda!
  10. 7

    También quiero contribuir a esta respuesta. Yo estaba buscando algo similar en jQuery y esto lo que al final he acabado usando.

    Tengo mi círculo de carga de http://ajaxload.info/. Mi solución está basada en esta simple respuesta a http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

    Básicamente el lenguaje de marcado HTML y CSS tendría este aspecto:

    <style>
         #ajaxSpinnerImage {
              display: none;
         }
    </style>
    
    <div id="ajaxSpinnerContainer">
         <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
    </div>

    Y, a continuación, el código de jQuery sería algo como esto:

    <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 🙂

  11. 7

    Usted puede simplemente asignar un gestor de imagen para la misma etiqueta en la que más tarde se carga de contenido mediante 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.

    • Va a ser difícil de manejar interfaz de usuario de esta manera. Necesitamos completamente diferentes estilos para la «carga» de texto y el mensaje final. Podemos utilizar el método de devolución de llamada se mencionó anteriormente para el manejo de este problema
  12. 6

    Así como la configuración de los valores predeterminados globales para eventos ajax, se puede establecer el comportamiento de los elementos específicos. Tal vez cambiando solamente su clase sería suficiente?

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

    Ejemplo de 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;  
    }
    • .loading > * { display:none; } muy inteligente gracias
    • Esta debe ser la respuesta seleccionada, en mi opinión. Gracias @LeeGee.
    • Muy buena respuesta
  13. 4

    Tenga en cuenta que debe utilizar llamadas asincrónicas para artesanos para trabajar (al menos eso es lo que causó la mía para no mostrar hasta después de la llamada de ajax y, a continuación, rápidamente se fue como la llamada había terminado y se retira el spinner).

    $.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                
            }
        });
  14. 4
    $('#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>');
    
                }
            });
    • Camino más corto sería insertar etiqueta de imagen con una imagen descargada de ajaxload.info con fondo transparente
  15. 2

    He utilizado el siguiente Diálogo de interfaz de usuario con jQuery. (Tal vez se trabaja con otros devoluciones de llamada de ajax?)

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

    La contiene una animación de carga gif hasta que su contenido es reemplazada cuando la llamada ajax completa.

  16. 2

    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

    • A la derecha, y se puede utilizar junto con el plugin mencionado en esta respuesta si desea …
  17. 2

    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; }
  18. 2

    Esta es una muy simple y elegante plugin para ese propósito específico:
    https://github.com/hekigan/is-loading

    • Muy bonito! Especialmente si usted echa un vistazo a las demos … Deshabilitar elementos del DOM, En la Etiqueta, Lleno de Superposición, Elemento de Superposición de … que proporciona todo lo que usted necesita. Y usted puede combinar fácilmente una cobertura Completa con esta respuesta para que funcione de forma instantánea.
  19. 1

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

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

    Sin embargo – es un buen valor por defecto para cuando su llamada AJAX no tiene ningún efecto en la propia página. (guardar en segundo plano, por ejemplo). ( siempre se puede cambiar por una cierta llamada ajax al pasar «global»:false – ver documentación en jquery

    Cuando la llamada de AJAX está destinado a la actualización de una parte de la página, me gusta mi «carga» de las imágenes para ser específicos para el fresco de la sección. Me gustaría ver que parte es la que se actualiza.

    Imaginar lo bueno que sería si usted podría simplemente escribir algo como :

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

    Y esto mostraría una «carga» en esta sección.
    A continuación es una función que yo escribí y que se encarga de «carga» de la pantalla también, pero es específico para el área de actualización en el ajax.

    Primer lugar, permítanme mostrarles 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 de un principio básico que se puede mejorar como usted desea. 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);
    };
  21. 1

    Si usted planea usar un cargador cada vez que usted realiza una solicitud al servidor, puede utilizar 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, utiliza el jajaxloader plugin (que acabo de crear)

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

  22. 1

    Mi código ajax parece a esto, en efecto, sólo he comentado async: false línea y la ruleta se muestra.

    $.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 de que el código ajax:

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

    Para Html, he utilizado una fuente impresionante de la clase:

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

    Espero que ayude a alguien.

Dejar respuesta

Please enter your comment!
Please enter your name here