Главная › Новости

Holder.js - изображения заглушки

Опубликовано: 01.09.2018

Очень часто, при создании шаблона для сайта , верстальщику необходимы готовые изображения. Изображения-заглушки используются в контейнерах, готовых блоках шаблона, чтобы наглядно посмотреть, как будет выглядеть готовый шаблон .

Можно создавать изображения в графическом редакторе  нужного размера по ходу написания кода шаблона.

My Toys, Лабиринт и Али!!!!

А можно применить механизм автоматического рендеринга изображений заглушек на стороне клиента (offline). Что гораздо быстрее, удобнее и нагляднее. А также позволяет понять какого размера изображение нужно поставить вместо заглушки.

Для этого необходимо скачать и подключить специальную javascript библиотеку holder.js :

 

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

Далее, по мере необходимости, просто задействуем скачанную библиотеку следующим образом:

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

Как вы догадались, цифры указывают на необходимый размер выходного изображения по горизонтали и вертикали.

При создании заглушек изображений можно дополнительно использовать два необязательных параметра:

цвет выходного изображения цвет размерной надписи

Например:

<img src="holder.js/300x200/#70c69e:#000">

Полученные изображения создаются автоматически при помощи canvas - нового элемента языка гипертекстовой разметки HTML5 , предназначенного для создания растрового двухмерного изображения при помощи javascript .