JavaScript - Loading al solicitar datos via ajax

 
Vista:
sin imagen de perfil
Val: 52
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Loading al solicitar datos via ajax

Publicado por Jonathan (20 intervenciones) el 19/10/2019 19:30:04
Tengo el siguiente panel de filtros

Captura3

El cual al hacer click en algun filtro ejecuta las siguientes funciones via ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).on('click','.filtro_seleccionado',function(){
        $('body, html').animate({scrollTop: '0px'}, 100);
        filtrado_productos();
    });
function filtrado_productos(CantidadPagina, PaginaNumero) {
    var time = 250;
	var action = 'fetch_data';
    var entrega = obtener_filtros('entrega');
	var marca = obtener_filtros('marca');
	var categoria = obtener_filtros('categoria');
    var precio = obtener_filtros('precio');
    var PaginaNumero = PaginaNumero;
    var CantidadPagina = CantidadPagina;
    var Option = obtener_option();
	$.ajax({
		url:"../logica/action_productos.php",
        method: "POST",
        dataType: "json",
		data:{ action:action, entrega:entrega, marca:marca, categoria:categoria,precio:precio,CantidadPagina:CantidadPagina,PaginaNumero:PaginaNumero,Option:Option},
        beforeSend: function() {
            $('.listado_productos').html('<div id="loading"><img></div>');
        },
        success:function(data){
            setTimeout(function(){
                $('.listado_productos').fadeIn(5000).html(data.html);
            },time);
 
		}
	});
}

generando el siguiente efecto cuando cargan los datos

Captura2

Me gustaria lograr el efecto que se ve en la siguiente pagina, donde se muestra el loading, pero a la ves se siguen viendo los datos atrás. Ademas de quitar ese borde feo que se ve alrededor del loading.

CAPTURA1

cualquier ayuda me serviría mucho, de antemano gracias a todos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.345
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Loading al solicitar datos via ajax

Publicado por Alejandro (289 intervenciones) el 20/10/2019 05:23:55
En tu css aplica estilos
1
2
3
4
5
6
#loading{
   background-color:rgba(255,255,255,.2);
}
#loading > img{
   border:0px;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 52
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Loading al solicitar datos via ajax

Publicado por Jonathan (20 intervenciones) el 20/10/2019 19:05:57
Gracias pos sus comentarios, pero en si, quería lograr el efecto load que se muestra manteniendo los datos en el fondo, según veo, se tienen los datos originales en el fondo, luego se muestra el load sobre los datos y finalmente trae los nuevos datos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar