Lazy Load: retrasar la carga de imágenes con jQuery

ByLuis

Interesante plugin para jQuery que permite retrasar la carga de imágenes para que la carga de la página sea más rápida. Para ello, cargará las imágenes sólo cuando se vean mediante el scroll. Un script que está pensado para páginas con gran número de imágenes pesadas.

Lazy Load

Vía / WebAppers

Similar Posts

|

Optimizing Search Functionality with Large JavaScript Arrays

ByLuis

Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code …

Post original

|

YSlow: añadido de Firebug de Yahoo

ByLuis

YSlow es un plugin para Firefox que añade una nueva pestaña a Firebug, la cual realiza informes de las páginas que visitamos y nos indica por qué es lenta según algunas reglas de rendimiento.
yslow.png
Muestra una evaluación de cada posible regla de rendimiento, mostrando estadísticas de ellas. Además indica que componentes están instalados y hace una comparativa entre la página visitada con caché o sin caché.
Una extensión muy a tener en cuenta.
YSlow
Vía / OpenSourceCommunity.org

iJab: chat javascript usando XMPP/Jabber

ByLuis

iJab es una librería javascript que nos permite añadir chat en nuestras aplicaciones web, con la característica que usa XMPP/Jabber para realizar las comunicaciones.

Entre las características encontramos:

  • Basado en el protocolo XMPP: lo cual permite usar servidores basados en ese protocolo
  • Soporte para MSN y AIM, añadiendo transports al servidor XMPP
  • Totalmente Javascript
  • Compatible con Firefox, IE, Chrome y Safari
  • Themes
  • Modos de aplicación: stant-alone, web chat y live
  • Sin pop-ups
  • Notificaciones de nuevos mensajes
  • Sonido
  • Múltiples usuarios en el chat (MUC)
  • Búsqueda de usuarios
  • Administración: permite añadir y borrar usuarios y administrar grupos
  • Smileys

iJab

Vía / WebAppers

Laboratorio: detectar parametros de la URL en Javascript

ByLuis

Algo bastante sencillo y que puede sernos útil es detectar los parámetros que se envían por URL para así modificar el comportamiento de nuestro Javascript, por ejemplo si se envía un parámetro o tiene cierto valor, se podría cargar un objeto o implementar una función.

El script sería el siguiente:

// Obtenemos la URL
var url = document.location.href;
// Nos quedamos con los parámetros
url = url.substring(url.lastIndexOf('?')+1);
// Dividimos los distintos parámetros
url = url.split('&');
// Almacenamos los parámetros en un array(param => valor)
var res = new Array();
for(var i=0; i

Si nuestra URL es amigable, no hay parámetros sino que se indican en la propia URL (http://servidor/metodo/accion/parametro/parametro), deberíamos hacer algo así:


//Obtenemos la Query String (URL - host)
var url = document.location.href;
url = url.substring(url.lastIndexOf(document.location.host)+1);
// Separamos mediante la barra (/)
var res = url.split('/');

Como se puede apreciar es muy sencillo, pero nos puede ser muy útil, sobre todo si queremos ganar en rendimiento y no cargar todo el js, que a veces no está muy optimizado y en todas las páginas se carga cuando a veces no sería necesario.

JIT: JavaScript Information Visualization Toolkit

ByLuis

Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
jit.png
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente.
JIT

| | |

Detectar cambio de tamaño de letra en Javascript

ByLuis

La verdad es que lo sencillo es lo mejor, y para cuando estés en la necesidad de detectar si se produce un cambio en el tamaño de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.
Al principio decía que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es así, se ha producido un cambio en el tamaño de la letra.
Text-Resize Detection
Demo
Código y ejemplos