QA Responsive Image Polyfill API для различных веб-приложений
Picturefill — это простой в использовании, интеллектуальный и отзывчивый API, который можно использовать в различных веб-приложениях, чтобы убедиться, что пользователи видят правильный размер, разрешение экрана и многое другое в зависимости от устройства.
Являясь API полифилла для адаптивных изображений, Picturefill имеет открытый исходный код и бесплатен для использования и был разработан с использованием Javascript и HTML. В основном используется для внешнего интерфейса приложений, он может стать отличным дополнением к любому проекту, где у конечных пользователей могут быть разные устройства, на которых они получают доступ к приложению.
Picturefill обеспечивает дополнительную поддержку и функции для элементов Picture и Img в браузерах. Это один из самых простых способов гарантировать, что независимо от того, с какого устройства ваши пользователи заходят на ваш сайт, изображения автоматически подстраиваются под размер и разрешение экрана. Picturefill был протестирован для многих браузеров, включая Safari, Internet Explorer 9, Google Chrome, Mozilla Firefox и других.
Начало работы с PictureFill
Рекомендуемый способ установки PictureFill через NPM. Пожалуйста, используйте следующую команду для его установки.
Установите PictureFill через NPM
npm install picturefillДобавляйте адаптивные изображения через бесплатный JavaScript API
Библиотека PictureFill с открытым исходным кодом позволяет разработчикам JavaScript добавлять адаптивные изображения на свой сайт, в том числе гарантируя, что зрители с окнами просмотра с высокой плотностью пикселей могут видеть активы с высоким разрешением, и он соответствующим образом настраивается. Точно так же вы можете предоставить браузеру несколько одинаковых изображений, но разных размеров. Picturefill отсортирует и предоставит лучший источник для текущего размера области просмотра вашего пользователя, плотности отображения и размера ресурса в макете веб-сайта. Picturefill также позволяет разработчикам решать, какие изображения будут отображаться в зависимости от области просмотра пользователя. С помощью элемента изображения вы можете указать различные размеры, уровни масштабирования, соотношения сторон и т. д.
Укажите точку останова изображения через бесплатный JavaScript API
Еще одной особенностью Picturefill является возможность определять определенные точки останова изображения с различными параметрами разрешения для исходных изображений на веб-сайте. Picturefill также предоставляет возможность выбрать резервные изображения для форматов изображений, которые не поддерживаются в определенных форматах. Таким образом, ваш сайт не будет показывать ошибки отображения изображений.
Поддержка браузера
Библиотека с открытым исходным кодом Picturefill обеспечивает полную поддержку различных типов браузеров. Библиотека тестируется и работает гладко на большом количестве браузеров, таких как Firefox, Google Chrome, Internet Explorer, Safari, Opera и многое другое. Когда JavaScript отключен, браузер может видеть текст атрибута alt как полный оборот. Библиотека включает в себя полную поддержку In9 и даже более старой версии. Для In9 и позже вам нужно будет обернуть обертку видео элемента вокруг исходных элементов в вашем теге изображения. Следующий пример показывает, как это сделать.
