Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Проверка поддержки браузером WebP на JavaScript

06.12.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Практически все современные браузеры поддерживают формат изображений WebP, но нелишним будет озаботиться проверкой этой самой поддержки, чтобы можно было выбрать, какие изображения загружать на страницу, а пользователю не пришлось бы разглядывать пустые площади вместо картинок.

Проверка основана на создании через протокол data:URL изображений, представляющих собой однопиксельные WebP-картинки в формате Lossy и Lossless. Если изображение удалось "загрузить" и его размеры корректные, то принимается, что браузер поддерживает этот формат. В случае возникновения ошибки при создании изображения поддержки этого формата в браузере нет.
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. var webp = {
  3.     lossy: {
  4.         src: 'data:image/webp;base64,UklGRiIAAABXR'+
  5.              'UJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
  6.         support: null
  7.     },
  8.     lossless: {
  9.         src: 'data:image/webp;base64,UklGRhoAAABXRUJQVlA'+
  10.              '4TA0AAAAvAAAAEAcQERGIiP4HAA==',
  11.         support: null
  12.     }
  13. };
  14. for (var i in webp) {
  15.     webp[i].img=new Image();
  16.     webp[i].img.id=i;
  17.     webp[i].img.onload=function(event) {
  18.         event=event || window.event;
  19.         var el=event.target || event.srcElement;
  20.         webp[el.id].support=(el.width>0 && el.height>0);
  21.     };
  22.     webp[i].img.onerror=function(event) {
  23.         event=event || window.event;
  24.         var el=event.target || event.srcElement;
  25.         webp[el.id].support=false;
  26.     };
  27.     webp[i].img.src=webp[i].src;
  28. }
  29. </script>
Результаты будут доступны в полях webp.lossy.support и webp.lossless.support. Если там null, то проверка не выполнялась или еще не завершена.

Способ хороший, но с одной оговоркой. Поскольку тестовые изображения создаются асинхронно, то данные с их обработчиков onload или onerror будут доступны не сразу после выполнения кода, а с некоторой задержкой, пусть и незначительной.
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. setTimeout(function() {
  3.     alert('Lossy: '+webp.lossy.support+'\nLossless: '+webp.lossless.support);
  4. },1000);
  5. </script>
Например, этот код выведет состояние поддержки формата WebP с задержкой в 1 секунду, когда результаты уже будут известны.

Просмотров: 2105 | Комментариев: 0

Кроссбраузерное получение и установка выделения в INPUT

10.10.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Шпаргалка для себя, чтобы не искать. Набор полезных функций для работы с полями ввода, такими как TEXTAREA и INPUT TYPE="TEXT". С помощью этих функций можно узнать, какой фрагмент текста выделен или же наоборот, выделить текст заданной длины с определенной позиции.

Функция получения границ выделения в поле ввода. В качестве параметров передается элемент поля ввода, на выходе объект с значениями начальной и конечной позиции выделения.
Code (JavaScript) : Убрать нумерацию
  1. //---------------------------------------------------------
  2. // Получение границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function get_selected_input(el) {
  5.     var pos={start:0, end:0};
  6.  
  7.     if (el.selectionStart) {
  8.         // Mozilla + Opera + Chrome + Safari
  9.         pos={
  10.             start: el.selectionStart,
  11.             end: el.selectionEnd
  12.         };
  13.     }
  14.     else {
  15.         // IE
  16.         if (document.selection) {
  17.             var sel=el.createTextRange();
  18.             sel.moveToBookmark(document.selection.createRange().getBookmark());
  19.  
  20.             var before = el.createTextRange();
  21.             before.collapse(true);
  22.             before.setEndPoint('EndToStart', sel);
  23.  
  24.             pos={
  25.                 start: before.text.length,
  26.                 end: (before.text.length + sel.text.length)
  27.             };
  28.         }
  29.     }
  30.     return pos;
  31. }
Функция установки выделения в поле ввода. В качестве параметров передается элемент поля ввода, позиция начала и конца выделения.
Code (JavaScript) : Убрать нумерацию
  1. //---------------------------------------------------------
  2. // Установка границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function set_selected_input(el,start,end) {
  5.     // Корректировка границ
  6.     if (start>end) {
  7.         var tmp=start;
  8.         start=end;
  9.         end=tmp;
  10.     }
  11.  
  12.     if (el.selectionStart) {
  13.         // Mozilla + Opera + Chrome + Safari
  14.         el.setSelectionRange(start,end);
  15.     }
  16.     else {
  17.         // IE
  18.         var sel=el.createTextRange();
  19.         sel.collapse(true);
  20.         sel.moveStart('character',start);
  21.         sel.moveEnd('character', (end-start));
  22.         sel.select();
  23.     }
  24.     return true;
  25. }
Кроме этих сюда же можно отнести еще несколько функций для работы с полем ввода и выделенным текстом. Чуток не в тему, но очень близко, тем более, что чаще всего они используются в связке.

Читать статью целиком »
Просмотров: 843 | Комментариев: 0

Перемешивание массива на JavaScript

20.11.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Перемешивание массива на JavaScript

Несмотря на особенности сортировки массивов в JavaScript, которые нашли отражение даже в интернет-мемах, без этой самой сортировки не обойтись. Случайное перемешивание массива - тоже своеобразный вариант сортировки. Для его реализации в этих ваших интернетах обычно рекомендуют воспользоваться следующим или каким-то подобным кодом:
Code (JavaScript) : Убрать нумерацию
  1. var test_array=[1,2,3,4,5,6,7,8,9,10];
  2.  
  3. test_array.sort(
  4.     function() { return (Math.random()-0.5); }
  5. );
  6. // test_array -> перемешанный массив
На первый взгляд функция рабочая, но при тестировании, особенно на больших массивах, результат оставляет желать лучшего. В зависимости от поведения рандомайзера, в массиве могут оставаться целые последовательности неперемешанных элементов.

Читать статью целиком »
Просмотров: 1661 | Комментариев: 1

Отслеживание изменений в DOM через Mutation Events и MutationObserver

04.03.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Отслеживание изменений в DOM через Mutation Events и MutationObserver

Время статичных web-страниц уже давно прошло, теперь немалая часть контента подгружается динамически уже после загрузки основной страницы. Соответственно, эти данные недоступны для скриптов, отслеживающих загрузку через события типа onload или DOMContentLoaded. Может возникнуть вопрос: а зачем вообще это отслеживать? Ну, например, чтобы при помощи браузерных расширений и пользовательских скриптов удалять со страниц динамически подгружаемую рекламу, которую другими способами не заблокировать. К счастью, для отслеживания любых изменений, вносимых в структуру DOM, есть как минимум два инструмента. Речь идет о событиях Mutation Events и интерфейсе MutationObserver.

Читать статью целиком »
Просмотров: 3734 | Комментариев: 2

Определение состояния подключения к сети на JavaScript

21.10.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Определение состояния подключения к сети на JavaScript

В очередной раз бродя по интернетам, я наткнулся на упоминание электронного журнала The Disconnect. Суть его в том, что контент сайта становится доступен только когда пользователь отключится от интернета. Стоит включить соединение обратно и текст вновь скрывается. Весь этот эпатаж я оставлю на совести разработчика, но мне стало интересно, как реализована проверка состояния подключения.

Читать статью целиком »
Просмотров: 3664 | Комментариев: 3

01 02 03 04 05 06 07 08 09 ... 15
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (361), COM (41), CSS (41), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (51), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (9), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (28), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (24), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (315), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (68), мониторы (6), музеи (78), мультимедиа (75), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (49), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (129), полезные функции (42), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (51), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (9), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,133 раза
<< 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            
Всемирный день уничтожения военной игрушки
Всемирный день бороды
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 3 (0.0042 сек.) / Память: 4.5 Mb
Наверх