Aquí te enseño como cargar imágenes a medida que se scrollea…
Hoy en día se hace imprescindible acelerar los tiempos de carga de un sitio web debido a que muchas personas navegan con dispositivos móviles desde conexiones 3G.
En el siguiente ejemplo te voy a mostrar como demorar la carga de imágenes haciendo que solo se carguen las que se ven en pantalla hasta que el usuario se desplace hacia abajo.
>> Mira aquí el ejemplo funcionando
Carga de imágenes con scroll
Para realizarlo utilizaremos un plugin dependiente de jQuery, llamado “Lazy Load”. Es muy simple.
Para implementarlo tenemos 2 pasos:
- Cargar la librería general de jQuey, el plugin de jQuery llamado Lazy Load y un pequeños script de javascript que ejecutará el plugin cuando hagamos scroll. (antes de cerrar la etiqueta BODY)
- Incluir las imágenes con la etiqueta IMG clásica, pero agregando la clase “lazy” y en lugar de colocar la URL de la foto en el atributo “src”, la colocamos en “data-original”.
Entonces antes de cerrar nuestro BODY colocamos:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.lazyload.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>
Aquí vemos la llamada a la librería jQuery desde Google, luego la llamada a nuestro plugin de Lazy Load que en este caso esta en la carpeta “js” y por último el script para ejecutarlo donde incluimos el efecto «fadeIn» para que las fotos aparezca suavemente.
(si no quieres usar el efecto, colocar directamente $(«img.lazy»).lazyload();
Luego para las imágenes donde queramos insertarlas colocamos:
<img class="lazy img-responsive" data-original="fotos/bmw_m1_hood.jpg" width="765" height="574">
En este caso seria una imagen llamada “bmw_m1_hood.jpg” ubicada en la carpeta “fotos” y que mide 765 x 574 px.
Debes colocar las medidas que quieras, modificar la ubicación donde tienes las fotos y repetir la etiqueta IMG tantas veces como imágenes tengas.
Descarga AQUI debajo todos los códigos de este ejemplo para usarlos directamente en tus páginas:
[sociallocker id=»2527″] ** Descargar Ejemplo **[/sociallocker]
De esta forma tus fotos se cargarán y aparecerán a medida que haces scroll hacia abajo evitando que se carguen todas al mismo tiempo y acelerando tu pagina.
Déjame tus comentarios!
Saludos!!!
Cristian
Excelente