QA Responsive Image Polyfill API skirtingoms žiniatinklio programoms
„Picturefill“ yra paprasta naudoti, išmani ir reaguojanti API, kurią galima naudoti įvairiose žiniatinklio programose, siekiant užtikrinti, kad vartotojai matytų tinkamą dydį, ekrano skiriamąją gebą ir daugiau, priklausomai nuo įrenginio.
„Picturefill“, kaip reaguojanti vaizdo polifill API, yra atvirojo kodo ir nemokama. Ji buvo sukurta naudojant „Javascript“ ir HTML. Daugiausia naudojamas priekinėms programoms, jis gali puikiai papildyti bet kokį projektą, kuriame galutiniai vartotojai gali turėti skirtingus įrenginius, kuriais jie pasiekia programą.
„Picturefill“ teikia papildomą „Picture“ ir „Img“ elementų palaikymą ir funkcijas naršyklėse. Tai vienas iš paprasčiausių būdų užtikrinti, kad nesvarbu, iš kurio įrenginio naudotojai pasiekia jūsų svetainę, vaizdai automatiškai prisitaiko prie ekrano dydžio ir skiriamosios gebos. „Picturefill“ buvo išbandytas daugelyje naršyklių, įskaitant „Safari“, „Internet Explorer 9“, „Google Chrome Mozilla Firefox“ ir kt.
Darbo su PictureFill pradžia
Rekomenduojamas būdas įdiegti „PictureFill“ per NPM. Norėdami ją įdiegti, naudokite šią komandą.
Įdiekite „PictureFill“ per NPM
npm install picturefillPridėkite reaguojančių vaizdų naudodami nemokamą „JavaScript“ API
Atvirojo kodo „PictureFill“ biblioteka leidžia „JavaScript“ kūrėjams į savo svetainę įtraukti interaktyvių vaizdų, taip pat užtikrinti, kad žiūrintieji, turintys didelio pikselių tankio peržiūros sritis, matytų didelės raiškos išteklius ir atitinkamai koreguotų. Panašiai galite pateikti naršyklei daugybę identiškų, bet skirtingo dydžio vaizdų. „Picturefill“ surūšiuos ir pateiks geriausią jūsų vartotojo dabartinio peržiūros srities dydžio, rodymo tankio ir svetainės maketo ištekliaus dydžio šaltinį. „Picturefill“ taip pat leidžia kūrėjams nuspręsti, kurie vaizdai bus rodomi atsižvelgiant į vartotojo peržiūros sritį. Vaizdo elemento pagalba galite nurodyti įvairius dydžius, priartinimo lygius, formato koeficientus ir kt.
Nurodykite vaizdo lūžio tašką naudodami nemokamą JavaScript API
Kita „Picturefill“ funkcija yra galimybė apibrėžti konkrečius vaizdo lūžio taškus su skirtingos raiškos parinktimis šaltinio vaizdams svetainėje. „Picturefill“ taip pat suteikia galimybę pasirinkti atsarginius vaizdo formatų vaizdus, kurių tam tikri formatai nepalaiko. Tokiu būdu jūsų svetainėje nebus rodomos vaizdo rodymo klaidos.
Naršyklės palaikymas
Atvirojo kodo „Picturefill“ biblioteka suteikė visišką įvairių tipų naršyklių palaikymą. Biblioteka yra išbandyta ir sklandžiai veikia daugelyje naršyklių, tokių kaip Firefox, Google Chrome, Internet Explorer, Safari, Opera ir daugelis kitų. Kai „JavaScript“ išjungta, naršyklė gali matyti alt atributo tekstą kaip atsarginį variantą. Bibliotekoje yra pilnas IE9 ir net senesnės versijos palaikymas. Jei naudojate IE9 ir naujesnes versijas, vaizdo žymos šaltinio elementus turėsite apvynioti vaizdo elemento apvalkalu. Toliau pateiktame pavyzdyje parodyta, kaip tai padaryti.
