QA Responsive Image Polyfill API for forskjellige nettapplikasjoner
Picturefill er et brukervennlig, smart og responsivt API som kan brukes i ulike nettapplikasjoner for å sikre at brukerne ser riktig størrelse, skjermoppløsning og mer avhengig av enhet.
Som et responsivt bilde polyfill API, er Picturefill åpen kildekode og gratis å bruke og har blitt utviklet ved hjelp av Javascript og HTML. Hovedsakelig brukt for frontend av applikasjoner, kan det være et flott tillegg til ethvert prosjekt der sluttbrukere kan ha forskjellige enheter som de får tilgang til applikasjonen på.
Picturefill gir ekstra støtte og funksjoner for bilde- og bildeelementene i nettlesere. Det er en av de enkleste måtene å sikre at bildene automatisk tilpasser seg skjermstørrelsen og oppløsningen, uansett hvilken enhet brukerne åpner nettstedet ditt fra. Picturefill har blitt testet for mange nettlesere, inkludert Safari, Internet Explorer 9, Google Chrome Mozilla Firefox og mer.
Komme i gang med PictureFill
Den anbefalte måten å installere PictureFill på via NPM. Bruk følgende kommando for å installere den.
Installer PictureFill via NPM
npm install picturefillLegg til responsive bilder via gratis JavaScript API
PictureFill-biblioteket med åpen kildekode lar JavaScript-utviklere legge til responsive bilder på nettstedet sitt, inkludert å sørge for at seere med visningsporter med høy pikseltetthet kan se innholdselementer med høy oppløsning, og det justeres deretter. På samme måte kan du gi nettleseren et antall bilder som er identiske, men med varierende størrelse. Picturefill vil sortere ut og gi den beste kilden for brukerens nåværende visningsportstørrelse, visningstetthet og størrelsen på ressursen i nettstedets layout. Picturefill lar også utviklere bestemme hvilke bilder som skal vises avhengig av brukerens visningsport. Ved hjelp av bildeelementet kan du spesifisere ulike størrelser, zoomnivåer, sideforhold osv.
Spesifiser bildebruddpunkt via gratis JavaScript API
En annen funksjon i Picturefill er muligheten til å definere spesifikke bildebruddpunkter med forskjellige oppløsningsalternativer for kildebilder på nettstedet. Picturefill gir også muligheten til å bestemme reservebilder for bildeformater som ikke støttes i visse formater. På denne måten vil ikke nettstedet ditt vise bildevisningsfeil.
Nettleserstøtte
Åpen kildekode Picturefill-biblioteket har gitt fullstendig støtte for ulike typer nettlesere. Biblioteket er testet og fungerer problemfritt på et stort antall nettlesere, som Firefox, Google Chrome, Internet Explorer, Safari, Opera og mange flere. Når JavaScript er deaktivert, kan nettleseren se alt-attributtteksten som en reserve. Biblioteket har inkludert full støtte for IE9 og til og med den eldre versjonen. For IE9 og nyere må du vikle en videoelementomslag rundt kildeelementene i bildekoden. Følgende eksempel viser hvordan du gjør det.
