jQuery Infinite Scrolling/Lazy Loading

Question

Actualmente estoy rediseñando mi sitio web y he estado buscando usar JavaScript y jQuery. Esto es lo que tengo hasta ahora: http://www.tedwinder.co.uk/gallery2/.

Mi visión es tener todas las fotos en una página, que el usuario puede desplazarse, como ahora. Sin embargo, entiendo las limitaciones y los efectos de tener más de 50 imágenes de gran tamaño en una página y he considerado utilizar el desplazamiento infinito y la carga diferida, que entiendo que solo cargaría las imágenes cuando el usuario acceda a ellas, o cuando hagan clic en una "Más" enlace?

Entonces, mi pregunta es: ¿esto reduciría la carga de la página, cómo exactamente implementaría el desplazamiento infinito/carga lenta y funcionaría de manera efectiva, o podría pensar en alguna forma más efectiva de hacerlo?

Gracias, Ted

Answer 1

Este es un muy buen complemento para jQuery que se encarga de la imagen carga diferida.

http://www.appelsiini.net/projects/lazyload

Imágenes por debajo del pliegue no será cargado hasta que se desplazan a la vista.

Reducirá el ancho de banda de su sitio, pero si no tiene mucho tráfico, no hará mucha diferencia.

Para un ejemplo de esta técnica en uso, echa un vistazo a http://mashable.com/

Answer 2

Puede probar este plugin de jQuery escribí que utiliza los comentarios html a la carga perezosa cualquier bit arbitrarios de HTML, incluyendo imágenes:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

He aquí un ejemplo:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 
$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 
</script> 

Así que, básicamente, envuelve el contenido que desea cargar de forma diferida con una etiqueta de marcador de posición y un comentario html interno. Cuando el marcador de posición se vuelve visible en la ventana gráfica, se reemplaza con la cadena html dentro del comentario.

Puede usar cualquier etiqueta para el marcador de posición, pero me gusta pre porque se muestra como 0 dimensión cuando solo hay un comentario dentro.

Espero que esto ayude! @MW_Collins

Answer 3

tratan este jQuery Lazy desplazamiento Cargando Plugin http://code.google.com/p/jquerylazyscrollloading/

Answer 4

He aquí dos más plugins jQuery que hacen perezosos carga/desplazamiento infinito:

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/