Error con efecto "cargando" en algunos navegadores

victor5atodogas · #1 (**permalink**) 07/01/2015, 15:38

Hola a todos:

Me sucede en muchos sitios web (seguro que será por alguna tontería) que intento poner un efecto de "cargando" pero solo me funciona correctamente en firefox mientras que en el resto de navegadores no me funciona.

Al iniciar $(document).ready auto-añado una class al body que muestra un efecto de cargando, justo despúes ejecuto varias funciones por ajax (async: false, cache: false) y al después de las funciones quito la clase de cargando al body.

Esto funciona correctamente en Firefox pero no así en Chrome u otros navegadores y me gustaría saber cual es el motivo para poder solucionarlo.

Muchas gracias

diurno10 · #2 (**permalink**) 08/01/2015, 11:09

pone el codigo resumido, para ver si te podemos dar una mano, asi es muy dificil

victor5atodogas · #3 (**permalink**) 08/01/2015, 11:35

Ok no hay problema, os dejo el código de ejemplo:

Código Javascript:

Ver original$(document).ready(function() {
    
    open_loading();
        
    load_calendario1();
    load_calendario2();
    
    web_cargada = true;
    
    close_loading();    
});
 
function load_calendario1()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}
 
function load_calendario2()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}  
 
function open_loading()
{
    $('body').addClass("loading");
}
 
function close_loading()
{
    if(web_cargada==true)
    {
        $('body').removeClass("loading");        
    }    
}

Alexis88 · #4 (**permalink**) 08/01/2015, 11:40

Te aconsejo utilizar los métodos ajaxStart y ajaxStop, así se ejecutaría el efecto de carga para todas las peticiones asíncronas.

Código Javascript:

Ver original$(document).ajaxStart(function(){
    $('body').addClass("loading");
}).ajaxStop(function(){
    $('body').removeClass("loading");
});

No sé qué efecto añadirá tu clase loading; lo que yo hago es mostrar/ocultar un GIF de carga y, pues, nunca he tenido problemas con ningún navegador.

Saludos

diurno10 · #5 (**permalink**) 08/01/2015, 11:59

Una boludes, pero a mi me paso una vez, proba de colocar las funciones arriba de todo, ej:

Código Javascript:

Ver originalfunction load_calendario1()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}
 
function load_calendario2()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}  
 
function open_loading()
{
    $('body').addClass("loading");
}
 
function close_loading()
{
    if(web_cargada==true)
    {
        $('body').removeClass("loading");        
    }    
}
 
$(document).ready(function() {
    
    open_loading();
        
    load_calendario1();
    load_calendario2();
    
    web_cargada = true;
    
    close_loading();    
});

victor5atodogas · #6 (**permalink**) 08/01/2015, 14:15

Muchas gracias a los dos, usaré ambas opciones y os digo al respecto.

victor5atodogas · #7 (**permalink**) 08/01/2015, 15:13

Lo he probado de las 2 formas que me habéis comentado y en todas me sigue sin funcionar.

Aclaro que el open_loading añade con css una especie de gif de "cargando".

Alexis88 · #8 (**permalink**) 08/01/2015, 21:44

¿Podrías mostrarnos el código actualizado con las recomendaciones que te hemos dado?

victor5atodogas · #9 (**permalink**) 09/01/2015, 02:18

He colocado los dos ejemplos por separado:

Código Javascript:

Ver originalfunction load_calendario1()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}
 
function load_calendario2()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}  
 
function open_loading()
{
    $('body').addClass("loading");
}
 
function close_loading()
{
    if(web_cargada==true)
    {
        $('body').removeClass("loading");        
    }    
}
 
$(document).ready(function() {
    
    open_loading();
        
    load_calendario1();
    load_calendario2();
    
    web_cargada = true;
    
    close_loading();    
});

y el otro ejemplo:

Código Javascript:

Ver originalfunction load_calendario1()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}
 
function load_calendario2()
{
    open_loading();
    
    $.ajax({
        type: "POST",
        url: url1,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        cache: false,
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false)
            {
                
            }
            close_loading();
        }
    });
}  
 
function open_loading()
{
    $('body').addClass("loading");
}
 
function close_loading()
{
    if(web_cargada==true)
    {
        $('body').removeClass("loading");        
    }    
}
 
$(document).ajaxStart(function(){
    open_loading();
}).ajaxStop(function(){
    web_cargada = true;    
    close_loading();    
});
 
$(document).ready(function() {
    
    load_calendario1();
    load_calendario2();
});

Funcionar sigue funcionando todo correctamente pero el cargando sigue sin salir en Chrome.

Alexis88 · #10 (**permalink**) 09/01/2015, 08:40

Pienso que si tus funciones son de una o dos líneas, podrías ejecutarlas directamente en los métodos.

Código Javascript:

Ver originalfunction load_calendario(url)
{    
    $.ajax({
        type: "POST",
        url: url,
        async: false,
        cache: false,
        dataType : "json",
        data: { 
            ajax: true, 
            action: "action"},
        success: function(jsonData, textStatus, jqXHR) 
        {
            jsonData = $.parseJSON(jsonData);
            if(jsonData.errors==false){}
        }
    });
}
 
$(document).ready(function() {
    load_calendario("url1.php");
    load_calendario("url2.php");
});
 
$(document).ajaxStart(function(){ //Se ejecuta al iniciar la petición asíncrona (Ajax)
    $('body').addClass("loading");
}).ajaxStop(function(){ //Se ejecuta al terminar la petición asíncrona (Ajax)
    $('body').removeClass("loading");    
});

Simplifiqué un poco las funciones ya que noté que hacen exactamente lo mismo. Además, como los métodos que te recomendé usar hacen lo mismo que tus funciones 'open_loading' y 'close_loading', las quité y lo dejé solo con los métodos para quitar lo redundante.

Saludos

victor5atodogas · #11 (**permalink**) 10/01/2015, 07:12

Al colocar el ajaxStar y ajaxStop al final del tood he logrado que salga en Chrome, pero sale muy poco y en algunas ocasiones no sale, te paso el link de la web por privado y así podrás ver a que me refiero.