by
Janeth Kent
Date: 25-04-2013
Lazy Load , ispirado a YUI ImageLoader de Matt Mlinac es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas . Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.
Para hacer uso de esta librería es necesario incluir el el header de nuestro HTML jQuery y jquery.lazyload.js el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery .
Paso 1: JQuery
Cargamos el jQuery en el header.
<script type="text/javascript" src="http://www.google.com/jsapi "></script>
<script type="text/javascript">
.google.load("jquery", "1.3.2");
</script>
Paso 2: Lazyload.js
Cargamos el lazyload.js en el header.
<script src="URL/VERSO/jquery.lazyload.js" type="text/javascript"></script>
Paso 3: Inicializar LazyLoad
El siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala función lazyload a todas las imágenes de nuestro html.
<script type="text/javascript">
jQuery(document).ready(function(){
$("img").lazyload({
failurelimit : 50,
effect : "fadeIn"
});
});
</script>
Eso es suficiente para postergar la carga de imágenes en nuestras páginas hasta que estas imágenes estén en la zona visible del browser. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta técnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un mínimo de pixels antes de mostrar las imágenes.
$(function() {
$("img").lazyload({placeholder : "img/loading.gif", threshold : 100});
});
En el ejemplo se muestra la imagen loading.gif y se mostrarán las imágenes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en Lazy Load Demo .
by
Janeth Kent Date:
25-04-2013
visitas :
5667
Últimas noticias publicadas
La API de Flight Tracker brinda a los desarrolladores la capacidad de acceder al estado de los vuelos en tiempo real, lo cual resulta extremadamente útil para integrar un seguimiento…
Si eres un amante de los videojuegos y te gustan los clásicos, seguramente recuerdes con cariño la época en la que MS-DOS dominaba el mundo de la computación personal. Aunque…
La automatización y el avance de la tecnología han generado preocupación en algunos sectores sobre la posibilidad de que los robots quiten el trabajo a los humanos. Si bien es…
En el mundo del marketing digital, el posicionamiento en los motores de búsqueda es fundamental para el éxito de cualquier negocio en línea. Las SERPs (páginas de resultados del motor…
Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…
HTML5 Canvas es una tecnología que permite a los desarrolladores generar gráficos y animaciones en tiempo real utilizando JavaScript. Proporciona un lienzo en blanco en el cual se pueden dibujar…
La accesibilidad del diseño web juega un papel vital en garantizar que los sitios web sean inclusivos y utilizables para todos los usuarios, independientemente de sus habilidades o discapacidades. Evaluar…
El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…
El Vue 3 será lanzado pronto con la introducción del API de composición (Composition API). Viene con muchos cambios y mejoras en el rendimiento.
Los componentes de orden superior (HOC o…
Últimamente hemos estado en una búsqueda constante de buenos lectores de RSS para encontrar y compartir contenidos ricos para nuestros usuarios. El RSS es una gran manera de mantenerse al…
Bienvenido a un tutorial sobre cómo leer archivos en PHP. Sí, así es, ¿qué tan difícil puede ser leer archivos en PHP? Se sorprenderá... No es tan sencillo como algunos…
Uno de los temas más debatidos en relación a la inteligencia artificial es la posibilidad de que los puestos de trabajo sean reemplazados debido a la automatización de los procesos…
En su artículo titulado The Five Laws of SE for AI (Cinco leyes de la Ingeniería de Software para la Inteligencia Artificial), Tim Menzies reflexiona sobre el papel que desempeña…
En la era digital actual, los motores de búsqueda se han convertido en una herramienta esencial para encontrar información en línea.
La mayoría de las personas están familiarizadas con el uso…
En su artículo, Maria Antonia Huertas Sánchez de la UOC - Universitat Oberta de Catalunya, nos brinda una explicación sobre por qué deberíamos incorporar una visión de género en la…
Como diseñadores debemos ayudar a los demás a entender por qué es importante mantener espacios en blanco dentro de nuestra web y por qué es importante para la experiencia del…
A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…
El ímpetu y las ganas que tenemos de lanzar nuestra tienda online pueden ser contraproducentes si no hemos definido una estrategia previa al lanzamiento. Si nos empeñamos en lanzar nuestro…
El 30 de septiembre de 2010, Google anunció la publicación de un nuevo estándar abierto para la compresión con pérdida de gráficos de 24 bits en la web. La base…
Desde la versión 7 ya tenemos error al usar el modificador e con el preg_replace(). de hecho el modificador e, correspondiente a la constante PCRE PREG_REPLACE_EVAL, era antes utilizado en…