QA adaptīvā attēla Polyfill API dažādām tīmekļa lietojumprogrammām
Picturefill ir viegli lietojams, vieds un atsaucīgs API, ko var izmantot dažādās tīmekļa lietojumprogrammās, lai nodrošinātu, ka lietotāji redz pareizo izmēru, ekrāna izšķirtspēju un daudz ko citu atkarībā no ierīces.
Kā adaptīvs attēlu polifila API, Picturefill ir atvērtā koda un bezmaksas izmantošana, un tas ir izstrādāts, izmantojot Javascript un HTML. To galvenokārt izmanto lietojumprogrammu priekšpusē, un tas var lieliski papildināt jebkuru projektu, kurā gala lietotājiem var būt dažādas ierīces, kurās viņi piekļūst lietojumprogrammai.
Picturefill nodrošina papildu atbalstu un funkcijas Picture un Img elementiem pārlūkprogrammās. Tas ir viens no vienkāršākajiem veidiem, kā nodrošināt, ka neatkarīgi no ierīces, no kuras lietotāji piekļūst jūsu vietnei, attēli tiek automātiski pielāgoti to ekrāna izmēram un izšķirtspējai. Picturefill ir pārbaudīts daudzām pārlūkprogrammām, tostarp Safari, Internet Explorer 9, Google Chrome Mozilla Firefox un citām.
Darba sākšana ar PictureFill
Ieteicamais veids, kā instalēt PictureFill, izmantojot NPM. Lūdzu, izmantojiet šo komandu, lai to instalētu.
Instalējiet PictureFill, izmantojot NPM
npm install picturefill
Pievienojiet atsaucīgus attēlus, izmantojot bezmaksas JavaScript API
Atvērtā pirmkoda PictureFill bibliotēka ļauj JavaScript izstrādātājiem pievienot savai vietnei adaptīvus attēlus, tostarp nodrošināt, ka skatītāji ar augsta pikseļu blīvuma skata logiem var redzēt augstas izšķirtspējas līdzekļus un attiecīgi pielāgoties. Līdzīgi varat nodrošināt pārlūkprogrammai vairākus attēlus, kas ir identiski, bet ar atšķirīgu izmēru. Attēlu aizpildīšana noskaidros un nodrošinās vislabāko avotu jūsu lietotāja pašreizējā skata loga izmēram, displeja blīvumam un līdzekļa izmēram vietnes izkārtojumā. Attēlu aizpildīšana arī ļauj izstrādātājiem izlemt, kuri attēli tiek rādīti atkarībā no lietotāja skata porta. Ar attēla elementa palīdzību jūs varat norādīt dažādus izmērus, tālummaiņas līmeņus, malu attiecības utt.
Norādiet attēla pārtraukuma punktu, izmantojot bezmaksas JavaScript API
Vēl viena Picturefill funkcija ir iespēja definēt konkrētus attēla pārtraukuma punktus ar dažādām izšķirtspējas opcijām avota attēliem vietnē. Funkcija Picturefill nodrošina arī iespēju izvēlēties atkāpšanās attēlus attēlu formātiem, kas netiek atbalstīti noteiktos formātos. Tādā veidā jūsu vietnē netiks rādītas attēla rādīšanas kļūdas.
Pārlūkprogrammu atbalsts
Atvērtā pirmkoda Picturefill bibliotēka ir nodrošinājusi pilnīgu atbalstu dažāda veida pārlūkprogrammām. Bibliotēka ir pārbaudīta un darbojas nevainojami daudzās pārlūkprogrammās, piemēram, Firefox, Google Chrome, Internet Explorer, Safari, Opera un daudzās citās. Ja JavaScript ir atspējots, pārlūkprogramma var redzēt alt atribūta tekstu kā atkāpšanos. Bibliotēkā ir iekļauts pilns IE9 un pat vecākas versijas atbalsts. Ja izmantojat operētājsistēmu IE9 un jaunākas versijas, attēla tagā ap avota elementiem būs jāietver video elementa apvalks. Nākamajā piemērā parādīts, kā to izdarīt.