Проверка поддержки браузером WebP на JavaScript
Проверка поддержки браузером WebP на JavaScript
Практически все современные браузеры поддерживают формат изображений WebP, но нелишним будет озаботиться проверкой этой самой поддержки, чтобы можно было выбрать, какие изображения загружать на страницу, а пользователю не пришлось бы разглядывать пустые площади вместо картинок.
Проверка основана на создании через протокол data:URL изображений, представляющих собой однопиксельные WebP-картинки в формате Lossy и Lossless. Если изображение удалось "загрузить" и его размеры корректные, то принимается, что браузер поддерживает этот формат. В случае возникновения ошибки при создании изображения поддержки этого формата в браузере нет.
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- var webp = {
- lossy: {
- src: 'data:image/webp;base64,UklGRiIAAABXR'+
- 'UJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
- support: null
- },
- lossless: {
- src: 'data:image/webp;base64,UklGRhoAAABXRUJQVlA'+
- '4TA0AAAAvAAAAEAcQERGIiP4HAA==',
- support: null
- }
- };
- for (var i in webp) {
- webp[i].img=new Image();
- webp[i].img.id=i;
- webp[i].img.onload=function(event) {
- event=event || window.event;
- var el=event.target || event.srcElement;
- webp[el.id].support=(el.width>0 && el.height>0);
- };
- webp[i].img.onerror=function(event) {
- event=event || window.event;
- var el=event.target || event.srcElement;
- webp[el.id].support=false;
- };
- webp[i].img.src=webp[i].src;
- }
- </script>
Способ хороший, но с одной оговоркой. Поскольку тестовые изображения создаются асинхронно, то данные с их обработчиков onload или onerror будут доступны не сразу после выполнения кода, а с некоторой задержкой, пусть и незначительной.
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- setTimeout(function() {
- alert('Lossy: '+webp.lossy.support+'\nLossless: '+webp.lossless.support);
- },1000);
- </script>
Просмотров: 2542 | Комментариев: 0
Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 37,741 раз
Поблагодарили 37,741 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 340 |
 |
 |