QA Responsive Image Polyfill API dla różnych aplikacji internetowych
Picturefill to łatwy w użyciu, inteligentny i responsywny interfejs API, którego można używać w różnych aplikacjach internetowych, aby upewnić się, że użytkownicy widzą odpowiedni rozmiar, rozdzielczość ekranu i inne parametry w zależności od urządzenia.
Jako responsywny interfejs API do wypełniania obrazów, Picturefill jest darmowym oprogramowaniem typu open source i został opracowany przy użyciu JavaScript i HTML. Używany głównie do front-endów aplikacji, może stanowić świetny dodatek do każdego projektu, w którym użytkownicy końcowi mogą mieć różne urządzenia, na których uzyskują dostęp do aplikacji.
Picturefill zapewnia dodatkowe wsparcie i funkcje dla elementów Picture i Img w przeglądarkach. Jest to jeden z najprostszych sposobów na zapewnienie, że bez względu na to, z jakiego urządzenia użytkownicy uzyskują dostęp do Twojej witryny, obrazy automatycznie dostosowują się do rozmiaru i rozdzielczości ekranu. Picturefill został przetestowany dla wielu przeglądarek, w tym Safari, Internet Explorer 9, Google Chrome Mozilla Firefox i innych.
Pierwsze kroki z PictureFill
Zalecany sposób instalacji PictureFill przez NPM. Użyj następującego polecenia, aby go zainstalować.
Zainstaluj PictureFill przez NPM
npm install picturefillDodaj responsywne obrazy za pomocą bezpłatnego interfejsu API JavaScript
Biblioteka PictureFill o otwartym kodzie źródłowym umożliwia programistom JavaScript dodawanie responsywnych obrazów do swojej witryny, w tym upewnienie się, że widzowie z oknami widokowymi o dużej gęstości pikseli widzą zasoby w wysokiej rozdzielczości i odpowiednio się dostosowują. Podobnie możesz udostępnić przeglądarce wiele identycznych obrazów, ale o różnych rozmiarach. Picturefill posortuje i zapewni najlepsze źródło dla aktualnego rozmiaru okna użytkownika, gęstości wyświetlania i rozmiaru zasobu w układzie witryny. Picturefill pozwala również programistom decydować, które obrazy są wyświetlane w zależności od obszaru wyświetlania użytkownika. Za pomocą elementu obrazu możesz określić różne rozmiary, poziomy powiększenia, proporcje itp.
Określ punkt przerwania obrazu za pomocą bezpłatnego interfejsu API JavaScript
Kolejną cechą Picturefill jest możliwość zdefiniowania określonych punktów przerwania obrazu z różnymi opcjami rozdzielczości dla obrazów źródłowych w witrynie. Picturefill zapewnia również opcję wyboru obrazów zastępczych dla formatów obrazów, które nie są obsługiwane w niektórych formatach. W ten sposób Twoja witryna nie będzie wyświetlać błędów wyświetlania obrazu.
Obsługa przeglądarek
Biblioteka Picturefill o otwartym kodzie źródłowym zapewnia pełne wsparcie dla różnych typów przeglądarek. Biblioteka jest przetestowana i działa bezproblemowo na wielu przeglądarkach, takich jak Firefox, Google Chrome, Internet Explorer, Safari, Opera i wielu innych. Gdy JavaScript jest wyłączony, przeglądarka może zobaczyć tekst atrybutu alt jako rezerwę. Biblioteka zawiera pełne wsparcie dla IE9, a nawet starszej wersji. W przypadku IE9 i nowszych musisz owinąć opakowanie elementu wideo wokół elementów źródłowych w tagu obrazu. Poniższy przykład pokazuje, jak to zrobić.
