QA Responsive Image Polyfill API עבור יישומי אינטרנט שונים
Picturefill הוא API קל לשימוש, חכם ורספונסיבי שניתן להשתמש בו ביישומי אינטרנט שונים כדי לוודא שהמשתמשים רואים את הגודל הנכון, רזולוציית המסך ועוד בהתאם למכשיר.
כ-API של polyfill תמונה רספונסיבי, Picturefill הוא קוד פתוח וחינמי לשימוש ופותח באמצעות Javascript ו-HTML. משמש בעיקר עבור הקצה הקדמי של יישומים, הוא יכול להוות תוספת נהדרת לכל פרויקט שבו למשתמשי קצה עשויים להיות מכשירים שונים שבהם הם ניגשים לאפליקציה.
Picturefill מספקת תמיכה ותכונות נוספות עבור רכיבי Picture ו-Img בדפדפנים. זוהי אחת הדרכים הקלות ביותר להבטיח שלא משנה מאיזה מכשיר המשתמשים שלך ניגשים לאתר שלך, התמונות מתאימות אוטומטית לגודל המסך והרזולוציה שלהן. Picturefill נבדק עבור דפדפנים רבים כולל Safari, Internet Explorer 9, Google Chrome Mozilla Firefox ועוד.
תחילת העבודה עם PictureFill
הדרך המומלצת להתקין את PictureFill דרך NPM. אנא השתמש בפקודה הבאה כדי להתקין אותו.
התקן את PictureFill באמצעות NPM
npm install picturefillהוסף תמונות רספונסיביות באמצעות ממשק API של JavaScript בחינם
ספריית הקוד הפתוח PictureFill מאפשרת למפתחי JavaScript להוסיף תמונות רספונסיביות לאתר שלהם, כולל לוודא שצופים בעלי צפיפות פיקסל גבוהה יכולים לראות נכסים ברזולוציה גבוהה והיא מתאימה את עצמה בהתאם. באופן דומה, ניתן לספק לדפדפן מספר תמונות זהות אך בגדלים משתנים. Picturefill יסדר ויספק את המקור הטוב ביותר עבור גודל שדה התצוגה הנוכחי של המשתמש שלך, צפיפות התצוגה וגודל הנכס בפריסת האתר. Picturefill גם מאפשר למפתחים להחליט אילו תמונות יוצגו בהתאם לנקודת התצוגה של המשתמש. בעזרת אלמנט התמונה ניתן לציין גדלים שונים, רמות זום, יחסי גובה-רוחב וכו'.
ציין את נקודת הפסקת התמונה באמצעות API של JavaScript בחינם
תכונה נוספת של Picturefill היא היכולת להגדיר נקודות שבירה ספציפיות של תמונה עם אפשרויות רזולוציות שונות עבור תמונות מקור באתר. Picturefill מספקת גם אפשרות להחליט על תמונות חלופיות עבור פורמטים של תמונה שאינם נתמכים בפורמטים מסוימים. בדרך זו האתר שלך לא יציג שגיאות בתצוגת תמונה.
תמיכה בדפדפנים
ספריית הקוד הפתוח Picturefill סיפקה תמיכה מלאה עבור סוגים שונים של דפדפנים. הספרייה נבדקה ועובדת בצורה חלקה על מספר רב של דפדפנים, כגון Firefox, Google Chrome, Internet Explorer, Safari, Opera ועוד רבים. כאשר JavaScript מושבת, הדפדפן יכול לראות את טקסט התכונה alt כחלופה. הספרייה כללה תמיכה מלאה ב-IE9 ואפילו בגרסה הישנה יותר. עבור IE9 ואילך, תצטרך לעטוף עטיפה של רכיב וידאו סביב רכיבי המקור בתג התמונה שלך. הדוגמה הבאה מראה כיצד לעשות זאת.
