Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » Дизайн » Holder.js - изображения заглушки RSS
апр 28 2013 photo

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

admin 9 018
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5

Изображения-заглушки при помощи holder.js

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

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

  1. цвет выходного изображения
  2. цвет размерной надписи
Например:
<img src="holder.js/300x200/#70c69e:#000">

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

HashFlare
Другие новости по теме:
  • JQuery 2.0 вышел официально!
  • Как получить трафик при помощи сервиса Google Images
  • jQuery Uniform - плагин для Select, Checkbox, Textarea
  • Block.Pro.3 - новая версия DLE модуля
  • jQuery. Что это и для чего нужен?

Комментарии к: Holder.js - изображения заглушки (1)

    1. №1  Валера 05-05-2013 Цитировать
      Спасибо за информацию, интересная фишка, оказывается совсем необязательно создавать макеты изображений при верстке дизайна, данный плагин существенно облегчает задачу.
Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • JQuery 2.0 вышел официально!
  • Как получить трафик при помощи сервиса Google Images
  • jQuery Uniform - плагин для Select, Checkbox, Textarea
  • Block.Pro.3 - новая версия DLE модуля
  • jQuery. Что это и для чего нужен?
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Принципы резиновой верстки сайта
  • Как выявить дополнительные резервы для продвижения в поиске
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
  • Плавная прокрутка страницы сайта
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015