javascript - bootstrap - jQuery Infinite Scrolling/Lazy Loading

load scroll jquery

Question

Actualmente estoy rediseñando mi sitio web y he estado estudiando el uso de JavaScript y jQuery. Aquí está 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 pueda 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 usar el desplazamiento infinito y la carga lenta, lo que entiendo que solo cargaría las imágenes cuando el usuario las encuentre o cuando haga clic en un "Más" enlace?

Por lo tanto, mi pregunta es: ¿esto reduciría la carga de la página? ¿Cómo iría exactamente con la implementación de la carga perezosa y el desplazamiento infinito y funcionaría de manera efectiva, o podría pensar en una forma más efectiva de hacerlo?

Gracias ted

Answer 1

Aquí hay otros dos complementos de JQuery que cargan perezoso / desplazamiento infinito:

http://jscroll.com/

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

Answer 2

Este es un complemento bastante bueno para jQuery que maneja la carga perezosa de imágenes.

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

Las imágenes debajo del pliegue no se cargarán hasta que se desplacen a la vista.

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

Para ver un ejemplo de esta técnica en uso, visite http://mashable.com/

Answer 3

Puedes probar este complemento jQuery que escribí que usa comentarios html para cargar de forma perezosa cualquier bit arbitrario de html, incluidas las imágenes:

Publicación en el blog de jQuery Lazy Loader

jQuery Lazy Loader Plugin Page

Aquí hay 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>

Básicamente, envuelve el contenido que desea cargar perezosamente con una etiqueta de marcador de posición y un comentario html interno. Cuando el marcador de posición se hace visible en la ventana gráfica, se reemplaza con la cadena html dentro del comentario.

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

¡Espero que esto ayude! @MW_Collins

Answer 4

pruebe este complemento de carga de desplazamiento lento de jQuery http://code.google.com/p/jquerylazyscrollloading/