Blog. Just Blog

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

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

Проверка основана на создании через протокол data:URL изображений, представляющих собой однопиксельные WebP-картинки в формате Lossy и Lossless. Если изображение удалось "загрузить" и его размеры корректные, то принимается, что браузер поддерживает этот формат. В случае возникновения ошибки при создании изображения поддержки этого формата в браузере нет.
  1. <script type="text/javascript">
  2. var webp = {
  3.     lossy: {
  4.         src'data:image/webp;base64,UklGRiIAAABXR'+
  5.              'UJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
  6.         supportnull
  7.     },
  8.     lossless: {
  9.         src'data:image/webp;base64,UklGRhoAAABXRUJQVlA'+
  10.              '4TA0AAAAvAAAAEAcQERGIiP4HAA==',
  11.         supportnull
  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>&& 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 будут доступны не сразу после выполнения кода, а с некоторой задержкой, пусть и незначительной.
  1. <script type="text/javascript">
  2. setTimeout(function() {
  3.     alert('Lossy: '+webp.lossy.support+'\nLossless: '+webp.lossless.support);
  4. },1000);
  5. </script>
Например, этот код выведет состояние поддержки формата WebP с задержкой в 1 секунду, когда результаты уже будут известны.

Поделиться ссылкой ВКонтакте
Просмотров: 2161 | Комментариев: 0

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

Комментарии

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

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

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

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