holder.js - библиотека для автоматического рендеринга изображений на стороне клиента по заданным параметрам. Скачать последнюю актуальную версию Вы можете скачать с сайта разработчика: http://imsky.github.io/holder/

Пример:

Необходимо подключить сам holder.js

<script src="/path/to/holder.js">

Поставим первую заглушку:

<img src="holder.js/ШИРИНАxВЫСОТА">

Ширину и высоту заменяем на необходимые размеры, пример изображения размером 200 по ширине и 100 пикселей по высоте:

<img src="holder.js/200x100">

Дополнительно

Вывод квадратного изображения (например шириной в 200 пикселей):

<img src="holder.js/200">

Вывод изображения с указанием размера в процентах:

<img src="holder.js/100%x50%">

Вывод изображения с указанием ширины 100% и высоты 100 пикселей:

<img src="holder.js/100%x100">

Автоматическая подгонка размера изображения:

<img src="holder.js/200x200/auto">

Темы

В holder.js по умолчанию встроено 6 тем: sky, vine, lava, gray, industrial, social

Пример использования темы sky:

<img src="holder.js/200x300/sky">

Использование случайной темы:

<img data-src="holder.js/300x200/random">

Цвет

Пример изображения с черным фоном и белым текстом:

<img data-src="holder.js/100x200/#000:#fff">

Текст

Вы можете использовать произвольный текст с помощью оператора text

Пример изображения с текстом "кодер.укр":

<img data-src="holder.js/200x200/text:кодер.укр">

holder.js добавляет автоматически перенос строки, для контроля переноса строки используйте \n:

<img data-src="holder.js/200x200/text:сайт \n кодер.укр">

Установить название шрифта:

<img data-src="holder.js/200x200/text:сайт \n кодер.укр/font:Helvetica">

Больше информации о настройка holder.js можно посмотреть по адресу: https://github.com/imsky/holder