апр 28 2013
Holder.js - изображения заглушки
Очень часто, при создании шаблона для сайта, верстальщику необходимы готовые изображения. Изображения-заглушки используются в контейнерах, готовых блоках шаблона, чтобы наглядно посмотреть, как будет выглядеть готовый шаблон.
Можно создавать изображения в графическом редакторе нужного размера по ходу написания кода шаблона.
А можно применить механизм автоматического рендеринга изображений заглушек на стороне клиента (offline). Что гораздо быстрее, удобнее и нагляднее. А также позволяет понять какого размера изображение нужно поставить вместо заглушки.
Для этого необходимо скачать и подключить специальную javascript библиотеку holder.js:
<script src="holder.js"></script>Далее, по мере необходимости, просто задействуем скачанную библиотеку следующим образом:
<img src="holder.js/300x200">Как вы догадались, цифры указывают на необходимый размер выходного изображения по горизонтали и вертикали.
При создании заглушек изображений можно дополнительно использовать два необязательных параметра:
- цвет выходного изображения
- цвет размерной надписи
Например:
<img src="holder.js/300x200/#70c69e:#000">Полученные изображения создаются автоматически при помощи canvas - нового элемента языка гипертекстовой разметки HTML5, предназначенного для создания растрового двухмерного изображения при помощи javascript.
