QA Responsive Image Polyfill API για διαφορετικές εφαρμογές Ιστού
Το Picturefill είναι ένα εύχρηστο, έξυπνο και αποκριτικό API που μπορεί να χρησιμοποιηθεί σε διαφορετικές εφαρμογές ιστού για να βεβαιωθείτε ότι οι χρήστες βλέπουν το σωστό μέγεθος, ανάλυση οθόνης και πολλά άλλα ανάλογα με τη συσκευή.
Ως αποκριτικό API πολυπλήρωσης εικόνων, το Picturefill είναι ανοιχτού κώδικα και δωρεάν στη χρήση και έχει αναπτυχθεί χρησιμοποιώντας Javascript και HTML. Χρησιμοποιείται κυρίως για το μπροστινό μέρος των εφαρμογών, μπορεί να κάνει μια εξαιρετική προσθήκη σε οποιοδήποτε έργο όπου οι τελικοί χρήστες ενδέχεται να έχουν διαφορετικές συσκευές στις οποίες έχουν πρόσβαση στην εφαρμογή.
Το Picturefill παρέχει πρόσθετη υποστήριξη και δυνατότητες για τα στοιχεία Picture και Img στα προγράμματα περιήγησης. Είναι ένας από τους ευκολότερους τρόπους για να διασφαλίσετε ότι ανεξάρτητα από τη συσκευή από την οποία έχουν πρόσβαση οι χρήστες σας στον ιστότοπό σας, οι εικόνες προσαρμόζονται αυτόματα στο μέγεθος και την ανάλυση της οθόνης τους. Το Picturefill έχει δοκιμαστεί για πολλά προγράμματα περιήγησης, όπως Safari, Internet Explorer 9, Google Chrome Mozilla Firefox και άλλα.
Ξεκινώντας με το PictureFill
Ο προτεινόμενος τρόπος εγκατάστασης του PictureFill μέσω NPM. Χρησιμοποιήστε την παρακάτω εντολή για να το εγκαταστήσετε.
Εγκαταστήστε το PictureFill μέσω NPM
npm install picturefillΠροσθέστε αποκριτικές εικόνες μέσω του Free JavaScript API
Η βιβλιοθήκη PictureFill ανοιχτού κώδικα επιτρέπει στους προγραμματιστές JavaScript να προσθέτουν εικόνες με απόκριση στον ιστότοπό τους, συμπεριλαμβανομένης της διασφάλισης ότι οι θεατές με θύρες προβολής υψηλής πυκνότητας pixel μπορούν να δουν στοιχεία υψηλής ανάλυσης και προσαρμόζεται ανάλογα. Ομοίως, μπορείτε να παρέχετε στο πρόγραμμα περιήγησης έναν αριθμό εικόνων που είναι πανομοιότυπες αλλά με διαφορετικά μεγέθη. Το Picturefill θα τακτοποιήσει και θα παρέχει την καλύτερη πηγή για το τρέχον μέγεθος της θύρας προβολής του χρήστη σας, την πυκνότητα εμφάνισης και το μέγεθος του στοιχείου στη διάταξη του ιστότοπου. Το Picturefill επιτρέπει επίσης στους προγραμματιστές να αποφασίσουν ποιες εικόνες θα εμφανίζονται ανάλογα με το παράθυρο προβολής του χρήστη. Με τη βοήθεια του στοιχείου εικόνας, μπορείτε να καθορίσετε διάφορα μεγέθη, επίπεδα ζουμ, λόγους διαστάσεων κ.λπ.
Καθορίστε το σημείο διακοπής εικόνας μέσω του Free JavaScript API
Ένα άλλο χαρακτηριστικό του Picturefill είναι η δυνατότητα καθορισμού συγκεκριμένων σημείων διακοπής εικόνων με διαφορετικές επιλογές ανάλυσης για εικόνες πηγής στον ιστότοπο. Το Picturefill παρέχει επίσης την επιλογή επιλογής εναλλακτικών εικόνων για μορφές εικόνας που δεν υποστηρίζονται σε συγκεκριμένες μορφές. Με αυτόν τον τρόπο ο ιστότοπός σας δεν θα εμφανίζει σφάλματα εμφάνισης εικόνων.
Υποστήριξη
Η βιβλιοθήκη Picturefill παρέχει πλήρη υποστήριξη για διάφορους τύπους προγραμμάτων περιήγησης. Η βιβλιοθήκη δοκιμάζεται και λειτουργεί ομαλά σε ένα μεγάλο αριθμό προγραμμάτων περιήγησης, όπως Firefox, Google Chrome, Internet Explorer, Safari, Opera και πολλά άλλα. Όταν το JavaScript είναι απενεργοποιημένο, ο φυλλομετρητής μπορεί να δει το κείμενο alt χαρακτηριστικό ως fullback. Η βιβλιοθήκη περιλαμβάνει πλήρη υποστήριξη για το In9 και ακόμη και την παλαιότερη έκδοση. Για το In9 & αργότερα, θα πρέπει να τυλίξετε ένα περιτύλιγμα στοιχείου βίντεο γύρω από τα στοιχεία προέλευσης στην ετικέτα εικόνας σας. Το παρακάτω παράδειγμα δείχνει πώς να το κάνετε.
