QA Responsive Image Polyfill API pro různé webové aplikace
Picturefill je snadno použitelné, chytré a responzivní API, které lze použít v různých webových aplikacích, aby se zajistilo, že uživatelé uvidí správnou velikost, rozlišení obrazovky a další v závislosti na zařízení.
Jako responzivní obrazové polyfill API je Picturefill open source a zdarma k použití a byl vyvinut pomocí Javascriptu a HTML. Používá se hlavně pro přední část aplikací a může být skvělým doplňkem jakéhokoli projektu, kde mohou mít koncoví uživatelé různá zařízení, na kterých přistupují k aplikaci.
Picturefill poskytuje další podporu a funkce pro prvky Picture a Img v prohlížečích. Je to jeden z nejjednodušších způsobů, jak zajistit, že bez ohledu na to, ze kterého zařízení vaši uživatelé přistupují na váš web, se obrázky automaticky přizpůsobí velikosti a rozlišení jejich obrazovky. Picturefill byl testován pro mnoho prohlížečů včetně Safari, Internet Explorer 9, Google Chrome, Mozilla Firefox a dalších.
Začínáme s PictureFill
Doporučený způsob instalace PictureFill přes NPM. K instalaci použijte následující příkaz.
Nainstalujte PictureFill přes NPM
npm install picturefillPřidejte responzivní obrázky prostřednictvím bezplatného JavaScript API
Knihovna PictureFill s otevřeným zdrojovým kódem umožňuje vývojářům JavaScriptu přidávat na své stránky responzivní obrázky, včetně zajištění toho, že diváci s vysokou hustotou pixelů mohou vidět položky s vysokým rozlišením, a podle toho se přizpůsobí. Podobně můžete prohlížeči poskytnout řadu obrázků, které jsou identické, ale liší se velikostí. Picturefill vytřídí a poskytne nejlepší zdroj pro aktuální velikost výřezu vašeho uživatele, hustotu zobrazení a velikost podkladu v rozložení webu. Picturefill také umožňuje vývojářům rozhodnout, které obrázky se zobrazí v závislosti na výřezu uživatele. Pomocí prvku obrázek můžete určit různé velikosti, úrovně přiblížení, poměry stran atd.
Určete bod přerušení obrazu prostřednictvím bezplatného JavaScript API
Další funkcí Picturefill je možnost definovat konkrétní zarážky obrázků s různými možnostmi rozlišení pro zdrojové obrázky na webu. Picturefill také poskytuje možnost rozhodnout o záložních obrázcích pro obrazové formáty, které nejsou podporovány v určitých formátech. Tímto způsobem váš web nebude zobrazovat chyby zobrazení obrázku.
Podpora prohlížečů
Open source knihovna Picturefill poskytuje kompletní podporu pro různé typy prohlížečů. Knihovna je testována a funguje bez problémů na velkém množství prohlížečů, jako je Firefox, Google Chrome, Internet Explorer, Safari, Opera a mnoho dalších. Když je JavaScript zakázán, prohlížeč může vidět text atributu alt jako záložní. Knihovna obsahuje plnou podporu pro IE9 a dokonce i starší verzi. Pro IE9 a novější budete muset obalit zdrojové prvky ve vaší obrázkové značce obalem prvku videa. Následující příklad ukazuje, jak na to.
