QA Responsive Image Polyfill API pour différentes applications Web
Picturefill est une API facile à utiliser, intelligente et réactive qui peut être utilisée dans différentes applications Web pour s'assurer que les utilisateurs voient la bonne taille, la bonne résolution d'écran et plus encore en fonction de l'appareil.
En tant que polyfillis d'image réactif API, Picturefill est une source ouverte et libre d'utilisation et a été développé en utilisant Javascript et HTML. Il peut s'ajouter à tout projet où les utilisateurs finals peuvent avoir des dispositifs différents sur lesquels ils ont accès à l'application.
Picturefill fournit un support et des caractéristiques supplémentaires pour les éléments de la photo et de l'image dans les navigateurs. C'est l'un des moyens les plus faciles de s'assurer que les images s'adaptent automatiquement à leur taille et à leur résolution. On a mis à l'essai de photosfill pour de nombreux navigateurs, dont Safari, Internet Explorer 9, Google Chrome Mozilla Firefox, et plus encore.
Premiers pas avec PictureFill
La méthode recommandée pour installer PictureFill via NPM. Veuillez utiliser la commande suivante pour l'installer.
Installer PictureFill via NPM
npm install picturefillAjouter des images réactives via l'API JavaScript gratuite
La bibliothèque de la source ouverte PictureFill permet à JavaScript développeurs d'ajouter des images réceptives à leur site, notamment de s'assurer que les téléspectateurs à forte densité pixel peuvent voir des actifs à haute résolution. De même, vous pouvez fournir au navigateur un certain nombre d'images identiques mais de taille variable. Picturefill triera et fournira la meilleure source pour la taille actuelle du point de vue de votre utilisateur, la densité d’affichage et la taille de l’actif dans la présentation du site. Picturefill permet également aux développeurs de décider quelles images sont affichées selon le point de vue de l’utilisateur. Avec l'aide de l'élément d'image, vous pouvez spécifier diverses tailles, niveaux de zoom, rapports d'aspect, etc.
Spécifiez le point d'arrêt de l'image via l'API JavaScript gratuite
Une autre fonctionnalité de Picturefill est la possibilité de définir des points d'arrêt d'image spécifiques avec différentes options de résolution pour les images source sur le site Web. Picturefill offre également la possibilité de décider des images de secours pour les formats d'image qui ne sont pas pris en charge sur certains formats. De cette façon, votre site Web n'affichera pas d'erreurs d'affichage d'image.
Soutien des navigateurs
La bibliothèque de Picturefill de source ouverte a fourni un soutien complet à divers types de navigateurs. La bibliothèque est mise à l'essai et travaille sans heurts sur un grand nombre de navigateurs, tels que Firefox, Google Chrome, Internet Explorer, Safari, Opera et bien d'autres encore. Lorsque JavaScript est invalide, le navigateur peut voir le texte de l'attribut alt comme un renvoi complet. La bibliothèque a fourni un soutien complet à l'In9 et même à la version plus ancienne. Pour In9 plus tard, vous devrez fermer un écran d'éléments vidéo autour des éléments de source de votre étiquette d'image. L'exemple suivant montre comment le faire.
