Código de JQuery - Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador

Imágen de perfil

Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegadorgráfica de visualizaciones


JQuery

Publicado el 13 de Marzo del 2014 por Xavi
5.167 visualizaciones desde el 13 de Marzo del 2014. Una media de 42 por semana
Código que muestra como ir recargando el contenido de la página a medida que se va llegado al final de la misma.
En este ejemplo se va añadiendo texto, pero se puede añadir imágenes, contenido a través de ajax, etc...

Versión 1

Publicado el 13 de Marzo del 2014gráfica de visualizaciones de la versión: Versión 1
5.168 visualizaciones desde el 13 de Marzo del 2014. Una media de 42 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    $(document).ready(function(){
        var count=0;
 
        // evento que se ejecuta cuando se mueve el scroll de la pagina
        $(document).scroll(function(){
 
            // si esl scroll de la pagina mas la altura es superior
            // a la altura del documento
            if($(document).scrollTop()+$(window).height()>=$(document).height())
            {
                // Aqui podria ir una función ajax para cargar el contenido
                // de base de datos o de PHP...
 
                count+=1;
 
                // añadimos al final de la página unas lineas de ejemplo
                $("body").append("<p>Linea añadida desde javascript</p><p>Linea añadida desde javascript</p><p>Linea añadida desde javascript "+count+"</p>");
            }
        });
    });
    </script>
</head>
 
<body>
 
<h1>Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador</h1>
 
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
<p>linea de prueba</p>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2626