¿Cómo mostrar la carga del hilandero en jQuery?
spinner prototypejs (24)
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?
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; }
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;
}
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);
};
Este es un complemento muy simple e inteligente para ese propósito específico: https://github.com/hekigan/is-loading
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);
}
});
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();
});
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.
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.
Para jQuery utilizo
jQuery.ajaxSetup({
beforeSend: function() {
$(''#loader'').show();
},
complete: function(){
$(''#loader'').hide();
},
success: function() {}
});
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!
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''
});
Si no quieres escribir tu propio código, también hay muchos complementos que hacen eso:
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)
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.
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.
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/
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 :)
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
}
});
Terminé con dos cambios a la respuesta original .
- 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 ... - 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();
})
Utilice el complemento de carga: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:''loading.gif''});
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() {}
});
$(''#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>'');
}
});
$(''#message'').load(''index.php?pg=ajaxFlashcard'', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}