QA Responsive Image Polyfill API eri verkkosovelluksiin
Picturefill on helppokäyttöinen, älykäs ja reagoiva API, jota voidaan käyttää erilaisissa verkkosovelluksissa varmistamaan, että käyttäjät näkevät oikean koon, näytön resoluution ja paljon muuta laitteesta riippuen.
Responsiivisen kuvan polyfill API:na Picturefill on avoimen lähdekoodin ja ilmainen käyttö, ja se on kehitetty Javascriptin ja HTML:n avulla. Sitä käytetään pääasiassa sovellusten käyttöliittymään, ja se voi olla loistava lisä kaikkiin projekteihin, joissa loppukäyttäjillä voi olla erilaisia laitteita, joilla he käyttävät sovellusta.
Picturefill tarjoaa lisätukea ja ominaisuuksia selainten Picture- ja Img-elementeille. Se on yksi helpoimmista tavoista varmistaa, että riippumatta siitä, miltä laitteelta käyttäjäsi käyttävät verkkosivustoasi, kuvat mukautuvat automaattisesti näytön kokoon ja resoluutioon. Picturefill on testattu monille selaimille, kuten Safarille, Internet Explorer 9:lle, Google Chrome Mozilla Firefoxille ja muille.
PictureFillin käytön aloittaminen
Suositeltu tapa asentaa PictureFill NPM:n kautta. Käytä seuraavaa komentoa asentaaksesi sen.
Asenna PictureFill NPM:n kautta
npm install picturefillLisää reagoivia kuvia ilmaisen JavaScript-sovellusliittymän kautta
Avoimen lähdekoodin PictureFill-kirjaston avulla JavaScript-kehittäjät voivat lisätä responsiivisia kuvia sivustoonsa ja varmistaa, että katsojat, joilla on korkea pikselitiheys, näkevät korkearesoluutioiset resurssit ja säätyvät vastaavasti. Vastaavasti voit tarjota selaimelle useita kuvia, jotka ovat identtisiä mutta erikokoisia. Picturefill selvittää ja tarjoaa parhaan lähteen käyttäjäsi nykyisen näkymän koon, näyttötiheyden ja sivuston asettelun sisällön koon mukaan. Kuvatäytön avulla kehittäjät voivat myös päättää, mitkä kuvat näytetään käyttäjän näkymän mukaan. Kuvaelementin avulla voit määrittää erilaisia kokoja, zoomaustasoja, kuvasuhteita jne.
Määritä Image Breakpoint ilmaisella JavaScript API:lla
Toinen Picturefillin ominaisuus on kyky määrittää tietyt kuvan keskeytyskohdat eri resoluutiovaihtoehdoilla verkkosivuston lähdekuville. Picturefill tarjoaa myös mahdollisuuden valita varakuvia sellaisille kuvamuodoille, joita tietyt muodot eivät tue. Näin verkkosivustosi ei näytä kuvien näyttövirheitä.
Selainten tuki
Avoimen lähdekoodin Picturefill-kirjasto on tarjonnut täydellisen tuen erityyppisille selaimille. Kirjasto on testattu ja toimii sujuvasti useilla selaimilla, kuten Firefox, Google Chrome, Internet Explorer, Safari, Opera ja monet muut. Kun JavaScript on poistettu käytöstä, selain voi nähdä alt-attribuuttitekstin varavaihtoehtona. Kirjastossa on täysi tuki IE9:lle ja jopa vanhemmalle versiolle. Jos käytät IE9:ää ja uudempaa, sinun on käärittävä videoelementin kääre kuvatunnisteen lähdeelementtien ympärille. Seuraava esimerkki näyttää, kuinka se tehdään.
