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

|

Manipular vídeos con HTML5 y canvas

ByLuis

Increíbles ejemplos de cómo manipular vídeos en directo aplicando filtros gracias a HTML5 y canvas. Los ejemplos nos muestra cómo se reproduce un vídeo y se muestra el mismo vídeo con efecto de escala de grises o detección de contornos. Realmente increíble.

Post original

| |

Enlaza tu email sin miedo al spam

ByLuis

El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.

Un truqui para evitarlo que en su día lo descubrimos en 604th.net:

function nospam(name,domain){

window.location = 'mailto:' + name + '@' + domain;

}

Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.

Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:

<script type="text/javascript"  src="/js/emailnospam.js"></script>

Si lo has subido a la raíz elimina la ruta a la carpeta “js”. Quedaría así:

<script type="text/javascript" src="/emailnospam.js"></script>

Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:

<a href="javascript:nospam('ejemplo','dominio.com');">Contáctame</a>
| |

Laboratorio: control input selector para HTML

ByLuis

Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
input-selector.png
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mínimos y máximos que permite el controlador.

Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.

Read More “Laboratorio: control input selector para HTML”

Bluff: gráficas mediante Javascript

ByLuis

Bluff es un script que nos permite realizar gráficas de forma sencilla en Javascript. Es necesario incluir la librería JS.Class para que simule canvas en IE.

canvas.png

Crear gráficas es muy sencillo y solo deberemos incluir un script parecido a este:

<canvas id="example"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('example', 400);
g.theme_37signals();
g.title = 'My Graph';
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
g.draw();
</script>

Bluff

Agiliza la carga de tu Javascript

ByLuis

Una serie de consejos para que la carga de los javacripts no se demoren demasiado y hagan al usuario esperar, algo que no suele gustar, sobre todo ahora que cada vez hay mas efectos y funcionalidades que hacen que las páginas tarden más en cargarse.

  • Usa la extensión para Firefox Web-developer Toolbar o OctaGate SiteTimer para ver que es lo que se está comiendo el ancho de banda.
  • Comprime tus scripts con Rhino, aunque es recomendable tener una versión para pruebas sin comprimir ya que mirar un código comprimido es bastante complicado.
  • Situa el script al final del documento, así no habrá que esperar a que se cargue el script para ver el contenido de la página.
  • Carga los scripts cuando realmente los necesites: 
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}

Eso sí, retrasa la ejecución de los scripts para que de tiempo a cargarse.

  • Cachea tus scripts, cámbialo a un fichero php y modifica el header para que tenga caché.

Speed Up Your Javascript Load Time

Vía / dzone