QA Responsive Image Polyfill API لتطبيقات الويب المختلفة
Picturefill هي واجهة برمجة تطبيقات سهلة الاستخدام وذكية وسريعة الاستجابة يمكن استخدامها في تطبيقات الويب المختلفة للتأكد من أن المستخدمين يرون الحجم الصحيح ودقة الشاشة والمزيد اعتمادًا على الجهاز.
باعتبارها واجهة برمجة تطبيقات متعددة التعبئة للصور سريعة الاستجابة ، فإن Picturefill مفتوح المصدر ومجاني للاستخدام وقد تم تطويره باستخدام Javascript و HTML. تستخدم بشكل أساسي للواجهة الأمامية للتطبيقات ، ويمكن أن تقدم إضافة رائعة لأي مشروع حيث قد يكون لدى المستخدمين النهائيين أجهزة مختلفة يمكنهم من خلالها الوصول إلى التطبيق.
يوفر Picturefill دعمًا إضافيًا وميزات لعناصر الصورة والصورة في المستعرضات. إنها إحدى أسهل الطرق للتأكد من أنه بغض النظر عن الجهاز الذي يقوم المستخدمون بالوصول منه إلى موقع الويب الخاص بك ، فإن الصور تتكيف تلقائيًا مع حجم الشاشة ودقتها. تم اختبار Picturefill للعديد من المتصفحات بما في ذلك Safari و Internet Explorer 9 و Google Chrome Mozilla Firefox والمزيد.
الشروع في العمل مع PictureFill
الطريقة الموصى بها لتثبيت PictureFill عبر NPM. الرجاء استخدام الأمر التالي لتثبيته.
قم بتثبيت PictureFill عبر NPM
npm install picturefillأضف صورًا مستجيبة عبر Free JavaScript API
تسمح مكتبة PictureFill مفتوحة المصدر لمطوري JavaScript بإضافة صور متجاوبة إلى مواقعهم ، بما في ذلك التأكد من أن المشاهدين الذين لديهم إطارات عرض ذات كثافة بكسل عالية يمكنهم رؤية أصول عالية الدقة ويتم ضبطها وفقًا لذلك. وبالمثل ، يمكنك تزويد المتصفح بعدد من الصور المتطابقة ولكن بأحجام مختلفة. سيتم فرز Picturefill وتوفير أفضل مصدر لحجم إطار العرض الحالي للمستخدم ، وكثافة العرض ، وحجم الأصل في تخطيط موقع الويب. يتيح Picturefill أيضًا للمطورين تحديد الصور التي يتم عرضها وفقًا لإطار عرض المستخدم. بمساعدة عنصر الصورة ، يمكنك تحديد أحجام مختلفة ومستويات التكبير ونسب العرض إلى الارتفاع وما إلى ذلك.
حدد Image Breakpoint عبر Free JavaScript API
ميزة أخرى لـ Picturefill هي القدرة على تحديد نقاط توقف معينة للصور بخيارات دقة مختلفة للصور المصدر على موقع الويب. يوفر Picturefill أيضًا خيار تحديد الصور الاحتياطية لتنسيقات الصور غير المدعومة في تنسيقات معينة. بهذه الطريقة ، لن يعرض موقعك على الويب أخطاء في عرض الصور.
دعم المتصفحات
قدمت مكتبة Picturefill مفتوحة المصدر دعمًا كاملاً لأنواع مختلفة من المتصفحات. تم اختبار المكتبة وتعمل بسلاسة على عدد كبير من المتصفحات ، مثل Firefox و Google Chrome و Internet Explorer و Safari و Opera وغيرها الكثير. عند تعطيل JavaScript ، يمكن للمستعرض رؤية نص السمة البديلة كعنصر احتياطي. تضمنت المكتبة دعمًا كاملاً لـ IE9 وحتى الإصدار الأقدم. بالنسبة لـ IE9 والإصدارات الأحدث ، ستحتاج إلى لف غلاف عنصر فيديو حول العناصر المصدر في علامة الصورة الخاصة بك. يوضح المثال التالي كيفية القيام بذلك.
