Blog. Just Blog

Placeholder для изображений на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Placeholder для изображений на JavaScript
Placeholder для изображений на JavaScript

При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.

Принцип его работы очень простой. В HTML картинки-пустышки задаются кодом цвета в атрибуте src, а скрипт для таких изображений генерирует однопиксельный GIF указанного цвета и заменяет атрибут src на закодированный data:URL созданного изображения. Вот так выглядит верстка с тремя картинками-пустышками разных цветов.
  1. <img src="#FF0000" width="200" height="200" alt="Image Placeholder" />
  2. <img src="#FFFF00" width="200" height="200" alt="Image Placeholder" />
  3. <img src="#00FF00" width="200" height="200" alt="Image Placeholder" />
А вот и сам генератор, который должен запускаться после загрузки текстового содержимого страницы. Скрипт самодостаточный, никаких глобальных переменных в нем не используется, все необходимое находится локально.
  1. //----------------------------------------------------------------
  2. // Image Placeholder
  3. //----------------------------------------------------------------
  4. // Created by ManHunter / PCL (www.manhunter.ru)
  5. //----------------------------------------------------------------
  6. (function() {
  7.     var rawimgijcolors;
  8.     var b64img;
  9.     var chr1chr2chr3;
  10.     var enc1enc2enc3enc4;
  11.     var re=/^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
  12.     var b64chars 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+
  13.                    'hijklmnopqrstuvwxyz0123456789+/=';
  14.     var images=document.getElementsByTagName('img');
  15.     for (i=0i<images.lengthi++) {
  16.         img=images[i];
  17.         if (colors=img.getAttribute('src').match(re)) {
  18.             raw ='\x47\x49\x46\x38'+'\x39\x61\x01\x00'+
  19.                  '\x01\x00\x80\x00'+'\x00'+
  20.                  String.fromCharCode('0x'+colors[1])+
  21.                  String.fromCharCode('0x'+colors[2])+
  22.                  String.fromCharCode('0x'+colors[3])+
  23.                  '\x00\x00\x00\x21'+'\xF9\x04\x00\x00'+
  24.                  '\x00\x00\x00\x2C'+'\x00\x00\x00\x00'+
  25.                  '\x01\x00\x01\x00'+'\x00\x02\x02\x44'+
  26.                  '\x01\x00\x3B';
  27.  
  28.             b64img '';
  29.  
  30.             for (j=0j<raw.length;) {
  31.                 chr1=raw.charCodeAt(j++);
  32.                 chr2=raw.charCodeAt(j++);
  33.                 chr3=raw.charCodeAt(j++);
  34.  
  35.                 enc1=chr1>>2;
  36.                 enc2=((chr1&3)<<4)|(chr2>>4);
  37.  
  38.                 enc3=isNaN(chr2)?64:(((chr2&15)<<2)|(chr3>>6));
  39.                 enc4=isNaN(chr3)?64:(chr3&63);
  40.  
  41.                 b64img+=b64chars.charAt(enc1)+
  42.                         b64chars.charAt(enc2)+
  43.                         b64chars.charAt(enc3)+
  44.                         b64chars.charAt(enc4);
  45.             }
  46.             img.src='data:image/gif;base64,'+b64img;
  47.         }
  48.     }
  49. })();
Готовый пример работы скрипта вы можете посмотреть на демонстрационной странице. Может быть кому-нибудь пригодится.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 793 | Комментариев: 0

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0029 сек.) / Память: 4.5 Mb
Наверх