QA Responsive Image Polyfill API voor verschillende webapplicaties
Picturefill is een gebruiksvriendelijke, slimme en responsieve API die in verschillende webapplicaties kan worden gebruikt om ervoor te zorgen dat gebruikers de juiste grootte, schermresolutie en meer zien, afhankelijk van het apparaat.
Als responsieve afbeelding polyfill API, Picturefill is open source en gratis te gebruiken en is ontwikkeld met Javascript en HTML. Het wordt voornamelijk gebruikt voor de front-end van applicaties en kan een geweldige aanvulling zijn op elk project waarbij eindgebruikers verschillende apparaten hebben waarop ze toegang hebben tot de applicatie.
Picturefill biedt extra ondersteuning en functies voor de Picture- en Img-elementen in browsers. Het is een van de gemakkelijkste manieren om ervoor te zorgen dat, ongeacht vanaf welk apparaat uw gebruikers uw website bezoeken, de afbeeldingen zich automatisch aanpassen aan hun schermgrootte en resolutie. Picturefill is getest voor veel browsers, waaronder Safari, Internet Explorer 9, Google Chrome Mozilla Firefox en meer.
Aan de slag met PictureFill
De aanbevolen manier om PictureFill te installeren via NPM. Gebruik de volgende opdracht om het te installeren.
Installeer PictureFill via NPM
npm install picturefillResponsieve afbeeldingen toevoegen via gratis JavaScript API
De open-source PictureFill-bibliotheek stelt JavaScript-ontwikkelaars in staat om responsieve afbeeldingen aan hun site toe te voegen, inclusief ervoor te zorgen dat kijkers met kijkvensters met een hoge pixeldichtheid hoge resolutie-items kunnen zien en dat het zich dienovereenkomstig aanpast. Op dezelfde manier kunt u de browser voorzien van een aantal afbeeldingen die identiek zijn, maar met verschillende afmetingen. Picturefill sorteert en biedt de beste bron voor de huidige viewport-grootte van uw gebruiker, de weergavedichtheid en de grootte van het item in de lay-out van de website. Met Picturefill kunnen ontwikkelaars ook beslissen welke afbeeldingen worden weergegeven, afhankelijk van de viewport van de gebruiker. Met behulp van het beeldelement kunt u verschillende formaten, zoomniveaus, beeldverhoudingen enz. specificeren.
Specificeer Image Breakpoint via gratis JavaScript API
Een ander kenmerk van Picturefill is de mogelijkheid om specifieke afbeeldingsbreekpunten te definiëren met verschillende resolutie-opties voor bronafbeeldingen op de website. Picturefill biedt ook de mogelijkheid om fallback-afbeeldingen te bepalen voor afbeeldingsindelingen die op bepaalde indelingen niet worden ondersteund. Op deze manier zal uw website geen beeldweergavefouten vertonen.
Browser Support
De open bron Picturefill bibliotheek heeft volledige steun voor verschillende soorten browsers. De bibliotheek wordt getest en werkt glad op een groot aantal browsers, zoals Firefox, Google Chrome, internet Explorer, Safari, Opera, en nog veel meer. Als JavaScript wordt uitgeschakeld, kan de browser de altaarte tekst zien als een fullback. De bibliotheek heeft volledige steun voor In9 en zelfs de oudere versie. Voor In9 zal je later een video element moeten wikkelen rond de bron elementen in je fototag. Het volgende voorbeeld laat zien hoe het moet.
