Scroll infinito usando Ajax
Scroll infinito usando Ajax
En lugar de mostrar los resultados en diferentes páginas, la recuperación de todos los resultados en una sola página utilizando código JavaScript sencillo.
Descripción
Una página de infinito-contenido se puede lograr mediante la adición de una escena que desencadena en la parte inferior de la página. En Escena empezar a entrar en estado de carga. Guarde los Estados prevenir múltiples factores desencadenantes. En este ejemplo se utiliza la clase del elemento #loader. Hacer llamada AJAX para cargar contenido adicional (si no está ya en el estado de carga). Cuando se recibe el evento ajax “carga”, añadir el contenido a su contenedor, actualizar la escena y volver al estado original. La demostración a continuación en realidad no utilizar AJAX para garantizar la compatibilidad en línea. En su lugar, utiliza una función para imitar una llamada ajax para agregar contenido.
Fragmento de código
|
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
31
|
<font><font><Script></font></font><font></font><font><font>// Controlador init</font></font><font></font><font><font>controlador var = new ScrollMagic.Controller ({triggerElement: "#loader .dynamiccontent", triggerHook: "OnEnter"})</font></font><font></font><font><font>.addTo (controlador)</font></font><font></font><font><font>.en ( "enter", la función (e)</font></font><font></font><font><font>{</font></font><font></font><font><font>if (! $ ( "# cargador"). hasClass ( "activo")) {</font></font><font></font><font><font>$ ( "# Cargador") addClass ( "activo").;</font></font><font></font><font><font>si (consola) {</font></font><font></font><font><font>console.log ( "carga de nuevos artículos");</font></font><font></font><font><font>}</font></font><font></font><font><font>// Simular la llamada AJAX para añadir contenido a través de la función de abajo</font></font><font></font><font><font>setTimeout (addBoxes, 1000, 9);</font></font><font></font><font><font>}</font></font><font></font><font><font>});</font></font><font></font><font><font>// Función seudo para añadir nuevos contenidos. </font><font>En la vida real se haría a través de una petición Ajax.</font></font><font></font><font><font>addBoxes función (cantidad) {</font></font><font></font><font><font>for (i = 1; i <= cantidad; i ++) {</font></font><font></font><font><font>. Var randomColor = "#" + ( '00000' + (Math.random ()) * 0xFFFFFF << 0) .toString (16)) rebanada (-6);</font></font><font></font><font><font>$ ( "<Div> </ div>")</font></font><font></font><font><font>.addClass ( "Cuadro1")</font></font><font></font><font><font>Css (background-color, randomColor)</font></font><font></font><font><font>.appendTo ( "#content dynamicContent.");</font></font><font></font><font><font>}</font></font><font></font><font><font>// No te carga -> vuelva al estado normal</font></font><font></font><font><font>scene.update (); // asegurarse de que la escena se vuelve la nueva posición de inicio</font></font><font></font><font><font>$ ( "# Cargador") removeClass ( "activo").;</font></font><font></font><font><font>}</font></font><font></font><font><font>// Añadir algunas cajas para empezar</font></font><font></font><font><font>addBoxes (18);</font></font><font></font><font><font></ Script></font></font> |
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros