API QA Responsive Image Polyfill per diverse applicazioni Web
Picturefill è un'API facile da usare, intelligente e reattiva che può essere utilizzata in diverse applicazioni Web per assicurarsi che gli utenti vedano le giuste dimensioni, risoluzione dello schermo e altro a seconda del dispositivo.
In quanto API polyfill reattiva per immagini, Picturefill è open source e gratuito ed è stato sviluppato utilizzando Javascript e HTML. Utilizzato principalmente per il front-end delle applicazioni, può essere un'ottima aggiunta a qualsiasi progetto in cui gli utenti finali possono disporre di diversi dispositivi su cui accedono all'applicazione.
Picturefill fornisce supporto e funzionalità aggiuntivi per gli elementi Picture e Img nei browser. È uno dei modi più semplici per garantire che, indipendentemente dal dispositivo da cui gli utenti accedono al tuo sito Web, le immagini si adattino automaticamente alle dimensioni e alla risoluzione dello schermo. Picturefill è stato testato per molti browser tra cui Safari, Internet Explorer 9, Google Chrome Mozilla Firefox e altri.
Guida introduttiva a PictureFill
Il modo consigliato per installare PictureFill tramite NPM. Si prega di utilizzare il seguente comando per installarlo.
Installa PictureFill tramite NPM
npm install picturefillAggiungi immagini reattive tramite l'API JavaScript gratuita
La libreria PictureFill open source consente agli sviluppatori JavaScript di aggiungere immagini reattive al proprio sito, incluso assicurarsi che gli spettatori con viewport ad alta densità di pixel possano vedere risorse ad alta risoluzione e si adatti di conseguenza. Allo stesso modo, puoi fornire al browser un numero di immagini identiche ma con dimensioni diverse. Picturefill selezionerà e fornirà la migliore fonte per le dimensioni attuali del viewport dell'utente, la densità di visualizzazione e le dimensioni della risorsa nel layout del sito Web. Picturefill consente inoltre agli sviluppatori di decidere quali immagini visualizzare in base al viewport dell'utente. Con l'aiuto dell'elemento immagine, puoi specificare varie dimensioni, livelli di zoom, proporzioni ecc.
Specifica il punto di interruzione dell'immagine tramite l'API JavaScript gratuita
Un'altra caratteristica di Picturefill è la possibilità di definire specifici punti di interruzione dell'immagine con diverse opzioni di risoluzione per le immagini di origine sul sito Web. Picturefill offre anche la possibilità di decidere le immagini di fallback per i formati immagine che non sono supportati su determinati formati. In questo modo il tuo sito web non mostrerà errori di visualizzazione delle immagini.
Supporto browser
La libreria Picturefill open source ha fornito un supporto completo per vari tipi di browser. La biblioteca è testata e funziona senza intoppi su un gran numero di browser, come Firefox, Google Chrome, Internet Explorer, Safari, Opera, e molti altri. Quando JavaScript è disabilitato, il browser può vedere il testo attributo alt come un fullback. La biblioteca ha incluso il supporto completo per In9 e anche la versione precedente. Per In9 & più tardi, sarà necessario avvolgere un elemento video avvolge gli elementi di origine nel tag immagine. L'esempio seguente mostra come farlo.
