QA Responsive Image Polyfill API pentru diferite aplicații web
Picturefill este un API ușor de utilizat, inteligent și receptiv, care poate fi utilizat în diferite aplicații web pentru a se asigura că utilizatorii văd dimensiunea corectă, rezoluția ecranului și multe altele, în funcție de dispozitiv.
Ca API polyfill receptiv pentru imagini, Picturefill este open source și gratuit și a fost dezvoltat folosind Javascript și HTML. Folosit în principal pentru front-end-ul aplicațiilor, poate fi un plus excelent pentru orice proiect în care utilizatorii finali pot avea diferite dispozitive pe care accesează aplicația.
Picturefill oferă suport și funcții suplimentare pentru elementele Picture și Img din browsere. Este una dintre cele mai ușoare modalități de a vă asigura că, indiferent de dispozitivul de pe care utilizatorii dvs. accesează site-ul dvs. web, imaginile se ajustează automat la dimensiunea și rezoluția ecranului. Picturefill a fost testat pentru multe browsere, inclusiv Safari, Internet Explorer 9, Google Chrome Mozilla Firefox și multe altele.
Noțiuni introductive cu PictureFill
Modul recomandat de a instala PictureFill prin NPM. Vă rugăm să utilizați următoarea comandă pentru a o instala.
Instalați PictureFill prin NPM
npm install picturefillAdăugați imagini receptive prin API-ul JavaScript gratuit
Biblioteca PictureFill open-source permite dezvoltatorilor JavaScript să adauge imagini receptive pe site-ul lor, inclusiv asigurându-se că spectatorii cu ferestre de vizualizare cu densitate mare de pixeli pot vedea elementele de înaltă rezoluție și se ajustează în consecință. În mod similar, puteți furniza browserului un număr de imagini identice, dar cu dimensiuni diferite. Picturefill va sorta și va oferi cea mai bună sursă pentru dimensiunea actuală a ferestrei de vizualizare a utilizatorului dvs., densitatea afișajului și dimensiunea materialului în aspectul site-ului web. Picturefill le permite dezvoltatorilor să decidă ce imagini sunt afișate în funcție de vizualizarea utilizatorului. Cu ajutorul elementului imagine, puteți specifica diferite dimensiuni, niveluri de zoom, raporturi de aspect etc.
Specificați punctul de întrerupere a imaginii prin intermediul API-ului JavaScript gratuit
O altă caracteristică a Picturefill este capacitatea de a defini puncte de întrerupere specifice imaginii cu diferite opțiuni de rezoluție pentru imaginile sursă de pe site. Picturefill oferă, de asemenea, opțiunea de a decide imagini de rezervă pentru formatele de imagine care nu sunt acceptate pe anumite formate. În acest fel, site-ul dvs. web nu va afișa erori de afișare a imaginilor.
Suport pentru browsere
Biblioteca open source Picturefill a oferit suport complet pentru diferite tipuri de browsere. Biblioteca este testată și funcționează fără probleme pe un număr mare de browsere, cum ar fi Firefox, Google Chrome, Internet Explorer, Safari, Opera și multe altele. Când JavaScript este dezactivat, browserul poate vedea textul atributului alt ca o rezervă. Biblioteca a inclus suport complet pentru IE9 și chiar și versiunea mai veche. Pentru IE9 și versiuni ulterioare, va trebui să înfășurați un înveliș pentru elemente video în jurul elementelor sursă din eticheta de imagine. Următorul exemplu arată cum se face.
