Placeholder для изображений на JavaScript
Placeholder для изображений на JavaScript
При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.
Принцип его работы очень простой. В HTML картинки-пустышки задаются кодом цвета в атрибуте src, а скрипт для таких изображений генерирует однопиксельный GIF указанного цвета и заменяет атрибут src на закодированный data:URL созданного изображения. Вот так выглядит верстка с тремя картинками-пустышками разных цветов.
Code (HTML) : Убрать нумерацию
- <img src="#FF0000" width="200" height="200" alt="Image Placeholder" />
- <img src="#FFFF00" width="200" height="200" alt="Image Placeholder" />
- <img src="#00FF00" width="200" height="200" alt="Image Placeholder" />
Code (JavaScript) : Убрать нумерацию
- //----------------------------------------------------------------
- // Image Placeholder
- //----------------------------------------------------------------
- // Created by ManHunter / PCL (www.manhunter.ru)
- //----------------------------------------------------------------
- (function() {
- var raw, img, i, j, colors;
- var b64img;
- var chr1, chr2, chr3;
- var enc1, enc2, enc3, enc4;
- var re=/^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
- var b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+
- 'hijklmnopqrstuvwxyz0123456789+/=';
- var images=document.getElementsByTagName('img');
- for (i=0; i<images.length; i++) {
- img=images[i];
- if (colors=img.getAttribute('src').match(re)) {
- raw ='\x47\x49\x46\x38'+'\x39\x61\x01\x00'+
- '\x01\x00\x80\x00'+'\x00'+
- String.fromCharCode('0x'+colors[1])+
- String.fromCharCode('0x'+colors[2])+
- String.fromCharCode('0x'+colors[3])+
- '\x00\x00\x00\x21'+'\xF9\x04\x00\x00'+
- '\x00\x00\x00\x2C'+'\x00\x00\x00\x00'+
- '\x01\x00\x01\x00'+'\x00\x02\x02\x44'+
- '\x01\x00\x3B';
- b64img = '';
- for (j=0; j<raw.length;) {
- chr1=raw.charCodeAt(j++);
- chr2=raw.charCodeAt(j++);
- chr3=raw.charCodeAt(j++);
- enc1=chr1>>2;
- enc2=((chr1&3)<<4)|(chr2>>4);
- enc3=isNaN(chr2)?64:(((chr2&15)<<2)|(chr3>>6));
- enc4=isNaN(chr3)?64:(chr3&63);
- b64img+=b64chars.charAt(enc1)+
- b64chars.charAt(enc2)+
- b64chars.charAt(enc3)+
- b64chars.charAt(enc4);
- }
- img.src='data:image/gif;base64,'+b64img;
- }
- }
- })();
Просмотров: 2723 | Комментариев: 1
Метки: JavaScript, оформление сайта
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
romaniac
(29.01.2019 в 03:17):
Блестяще!
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,136 раз
Поблагодарили 35,136 раз
 |
2024 - СЕНТЯБРЬ |  |
||||
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | ||||||
День дизайнера-графика
День тестировщика
Международный день красоты
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |