¿Scroll infinito en HTML sin scripts?

alphasky · #1 (**permalink**) 09/02/2013, 16:31

Hola,

Mi problema es el siguiente:
Tengo un archivo html muy largo, digamos que es como un libro con ilustraciones. Mi pregunta es si hay alguna manera sencilla de insertarle un scroll infinito sin codigo externo ni plugins por ejemplo (ya que no quiero dividir el archivo en 10 paginas), a la hora de cargar la pagina hay algunas imagenes que no se cargan por sobrecarga. El archivo html pesa unos 100 kb y carga unas 100 imagenes.
Si no fuera posible, hay alguna manera de hacer que las imagenes se demoren un poco a la hora de cargar para que no se sature el server?

Grácias por la lectura y comprensión

C2am · #2 (**permalink**) 10/02/2013, 14:20

Me parece, y hasta casi estoy seguro (aunque según dice a "seguro" se lo llevaron preso) que con sólo html no se puede, aunque para serte sincero no entendí bien que es eso del scroll infinito.
Digo, por lo que dices tu página parece ser infinita

, con lo cual el scroll "natural" será infinito.

Saludos

pzin · #3 (**permalink**) 10/02/2013, 14:48

No se puede con HTML. Tendrás que usar JavaScript y usar AJAX para cargar el contenido según se haga scroll. Seguro que hay plug-ins para ello buscando por infinite scroll.

alphasky · #4 (**permalink**) 11/02/2013, 07:25

Cita:

Iniciado por C2am

Con lo de infinite scroll me referia a autoscroll, lo que tienen en facebook por ejemplo.

Cita:

Iniciado por Bonez

Entiendo lo del ajax y el javascript, el problema que tengo es que solo tengo una pagina con todo el contenido y no puedo usar el script para cargar la próxima página de contenido ya que es inexsistente.

Hay alguna variable para este caso?

Hay alguna manera de poner en el html que le pida las imagenes 1 a 1 y no todas de golpe?

emprear · #5 (**permalink**) 11/02/2013, 13:13

Cita:

Iniciado por alphasky

Hay alguna variable para este caso?

Hay alguna manera de poner en el html que le pida las imagenes 1 a 1 y no todas de golpe?

Sin javascript no, aqui hay una técnica más o menos sencilla

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
img{
display:block;
margin: 10px 2px;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function cargar_siguiente(a,n){
document.getElementById(n).src = a;
}
 
 
//]]>
</script>
</head>
<body>
<div id="imga">
<img src="uno.jpg" alt="" onload="cargar_siguiente('dos.png','i_2')" id="i_1" />    
<img src="transparente.gif" alt="" onload="cargar_siguiente('tres.jpg','i_3')" id="i_2" />
<img src="transparente.gif" alt="" onload="cargar_siguiente('cuatro.jpg','i_4')" id="i_3" />
<img src="transparente.gif" alt="" id="i_4" />  
    
</div>
</body>
</html>

la idea es más o menos esta:
creas una imagen transparente de 1x1 pixels y la ponés por defecto en todas los <img> menos en el primero. Ponés un id a las imágenes, luego usas el evento onload en las imágenes (menos en la última por supuesto) que llama a la función cargar_siguiente(), pasando como parámetros el nombre de la imagen que se cargará en el siguiente <img>, del cual, ponés el id.
cargar_siguiente() se encargará de reemplazar el gif transparente por la que hayas indicado.
En conclusión ninguna imagen se va a cargar hasta que no se halla cargado la anterior. esto es muy básico y se le pueden hacer mejoras (como precargar las imágenes antes de la sustitución)

Pero te doy una mala noticia, con casi 100 kb de código y más de 100 imágenes en una sola página (que por otra parte no has comentado el peso de las mismas)el comportamiento igual puede ser imprevisible

Saludos

alphasky · #6 (**permalink**) 11/02/2013, 18:10

Muchas gracias, al menos ahora no se quedan colgadas las imagenes, aun que lo que no entiendo es porque no se cargan por orden ---->http://df28.com/tmp/

Pesan poco, en total las 110 no llegan al mb, pero creo que se sigue sobrecargando, con algun programa me sale overflow xD y la verdad que estoy pensando en esta web para que se pueda ver a través de los moviles

Así que creo que no habra otra que separar el contenido y ponerlo en varias páginas

emprear · #7 (**permalink**) 11/02/2013, 18:46

Cita:

Iniciado por alphasky

Muchas gracias, al menos ahora no se quedan colgadas las imagenes, aun que lo que no entiendo es porque no se cargan por orden ---->http://df28.com/tmp/

Pesan poco, en total las 110 no llegan al mb, pero creo que se sigue sobrecargando, con algun programa me sale overflow xD y la verdad que estoy pensando en esta web para que se pueda ver a través de los moviles

Así que creo que no habra otra que separar el contenido y ponerlo en varias páginas

viéndolo funcionar creo que se le podrian hacer unas mejoras, pero al menos no he visto que se cuelgue, y la probé en IE,FF,opera, Chrome y safari, la idea del loading no está mal, pero los gif animados recargan mucho el trabajo del browser. después veo de experimentar un poco

SAludos

emprear · #8 (**permalink**) 11/02/2013, 23:03

Después de hacer algunas pruebas, esto parece ser mejor, crear las imagenes con javascript e irlas añadiendo al body

Demo
http://foros.emprear.com/javascript/100img/

Saludos

alphasky · #9 (**permalink**) 13/02/2013, 11:37

Al final lo consegui

Las pegas:
- he tenido que aumentar las imagenes a 600px
- he tenido que aumental el temaño de la letra
(Al intentar visualicar la web a través del movil sale todo diminuto

)

A pesar de todo parece que la pagina carga bien, lo no entiendo es porque no carga las imágenes por orden, creo que las carga al revés

emprear · #10 (**permalink**) 13/02/2013, 13:10

Cita:

Iniciado por alphasky

Al final lo consegui

Las pegas:
- he tenido que aumentar las imagenes a 600px
- he tenido que aumental el temaño de la letra
(Al intentar visualicar la web a través del movil sale todo diminuto

)

A pesar de todo parece que la pagina carga bien, lo no entiendo es porque no carga las imágenes por orden, creo que las carga al revés

uyyy, las carga al revés, porque YO las puse al revés,
corregido
http://foros.emprear.com/javascript/100img/index.html

y dejé una versión para móviles
http://foros.emprear.com/javascript/100img/movil.html
pero con las imágens de 200px, si las pasas a 600 se va a ajustar, pero ya sería muy excesivo el tamaño de la página
En algunos smartphones más básicos, se puede llenar la memoria

SAludos

alphasky · #11 (**permalink**) 13/02/2013, 13:14

Perdon por no especificar, me referia en http://www.df28.com/tmp se me olvidó de comentarte lo del texto

emprear · #12 (**permalink**) 13/02/2013, 13:30

Cita:

Iniciado por alphasky

Perdon por no especificar, me referia en http://www.df28.com/tmp se me olvidó de comentarte lo del texto

Ya veo, bueno en el opera mini se ve perfecta (con wifi), en el nokia browser, las imágenes no terminan nunca de cargar.
Te aclaro que cuando alguien me dice "móviles", yo pienso en el diseño para dispositivos genéricos y velocidades de conexión bajas.
Igual dadas las características si yo tuviese que hacer algo asi, dividiría las 100 imágenes en 5 páginas de 20.

Saludos

alphasky · #13 (**permalink**) 13/02/2013, 13:42

Has sido de gran ayuda, de momento lo dejaré así, ya que no le quiero dedicar más tiempo por el mometo.

Dejo el tema abierto por si alguien se le ocurre de como cargar las imagenes con el scroll, que seria lo interesante simpre que todo el contenido este en el mismo index.html