A la hora de diseñar una web se suele hacer sin contenido alguno, rellenando los huecos donde deberían ir artículos, resúmenes… con textos aleatorios como el bien conocido Lorem Ipsum. Pero, ¿que hacemos con los huecos en los que deberían ir las imagenes? La mayor parte de la veces podemos poner cualquier imagen, pero siempre suele conllevar tener que cambiar el tamaño de la misma.
La librería holder.js nos ofrece la posibilidad de crear esas imagenes de relleno dinámicamente de una forma increíblemente sencilla. Además, contiene una gran cantidad de ajustes para poder cambiar el color de las mismas o el texto.
Cómo hacerlo funcionar
Paso 1: Cargar la librería
Cargamos la librería como cualquier JavaScript normal. Aquí el código:
<script src="holder.js"></script>
Paso 2: Mostrar las imágenes
Ahora cargaremos las imágenes siguiendo el patrón del siguiente código, utilizando el atributo de HTML5 data-src antes que el típico src si observamos algún comportamiento anómalo.
<img data-src="holder.js/{ancho}x{alto}">Podeis observar otras opciones de personalización en la demostración. Holder es claramente una opción muy recomendada para hacernos ganar tiempo durante el periodo de diseño de una página.