الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد فعل IMG بارد

هذا هو مكون رد فعل خفيف الوزن <Img /> ، والذي يساعدك على التعامل مع الصورة UX (تجربة المستخدم) وتحسين الأداء كرجل محترف؟

إنه يمكّن علامة img القياسية من خلال العديد من الميزات الرائعة دون كسر تجربة التطوير الأصلية. من الناحية المثالية ، يمكن أن يكون استبدال علامة img لـ React.js.

⚡ العرض التوضيحي الحي: https://react-cool-img.netlify.app

❤ ️ على github أو تغرد حول هذا الموضوع.

سمات

  • العناصر الناجمة لتلبية حالات تحميل الصور المختلفة (مثل صورة التحميل> الصورة الفعلية> صورة الخطأ).

  • التحميل الكسول الذكي مع الأداء والطريقة الفعالة ، باستخدام مراقب التقاطع.

  • آلية استرجع تلقائية مدمجة. لن يفوت المستخدم معلوماتك المهمة.

  • إحباط أي تنزيلات للصور الحالية على المكون غير المحتمل الذي يحتمل أن يوفر عرض النطاق الترددي والمستعرض.

  • يدعم تقديم / JavaScript من جانب الخادم.

  • يدعم تعريف نوع TypeScript.

  • حجم صغير (~ 2 كيلو بايت Gzipped). لا تبعيات خارجية ، جانبا react react-dom .

  • سهل الاستخدام.

️ تدعم معظم المتصفحات الحديثة مراقب التقاطع أصليًا. يمكنك أيضًا إضافة Polyfill لدعم المتصفح الكامل.

متطلبات

يعتمد react-cool-img على خطافات رد الفعل. يتطلب react v16.8+ .

تثبيت

يتم توزيع هذه الحزمة عبر NPM.

 $ yarn add react-cool-img# أو $ npm install-save React-cool-IMG

بداية سريعة

تم ضبط الدعائم الافتراضية للمكون لغرض التحسين. دعنا نبدأ كمثال التالي.

 استيراد IMG من "React-cool-IMG" ؛ // اقترح استخدام جودة منخفضة أو ناقلات الصور loadingImage من. ) => (
  <imgplaceholder = {loadingImage} src = "https: // the-image-url" error = {errorimage} alt = "React Cool IMG"
  />) ؛

لا تريد صورة نائبة؟ لا تقلق ، يمكنك استخدام أنماط أو CSS المضمنة لذلك. المكون متوافق تمامًا مع تجربة تطوير علامة img العادية.

 استيراد IMG من "React-cool-IMG" ؛ const app = () => (
  <imgstyle = {{backgroundColor: "Gray" ، العرض: "480" ، الارتفاع: "320"}} src = "https: // the-image-url" alt = "react cool img"
  />) ؛

API

يعمل مكون الصورة مماثلًا مع علامة img القياسية ومع الدعائم التالية.

دعم يكتب تقصير وصف
src خيط
 مصدر الصورة. required .
تنسيقات الدعم
srcSet خيط
 مصادر الصور للصور المستجيبة. ل Prop src فقط.
مقالة مرجعية
sizes خيط
 أحجام الصور للصور المستجيبة. ل Prop src فقط.
مقالة مرجعية
width خيط
 عرض الصورة في PX.
height خيط
 ارتفاع الصورة في PX.
placeholder خيط
 مصدر صورة العنصر النائب.
تنسيقات الدعم
error خيط
 مصدر صورة خطأ. سوف تحل محل صورة العنصر النائب.
تنسيقات الدعم
alt خيط
 نص بديل لقسم صورة.
decode منطقية true استخدم img.decode () للاختيار المسبق للصورة قبل تقديمها. مفيد لمنع الخيط الرئيسي من منع فك تشفير الصورة الكبيرة.
lazy منطقية true تشغيل/إيقاف تحميل كسول.
باستخدام مراقب التقاطع
cache منطقية true قم بتحميل الصور على الفور التي تم تخزينها مؤقتًا عند إمكانية إحباط سلوك التحميل البطيء.
مقالة مرجعية
debounce رقم 300 ما المبلغ الذي يجب انتظاره بالمللي ثانية التي يجب أن تكون الصورة في عرضها قبل البدء في التحميل. يمكن أن يمنع هذا الصور من تنزيلها أثناء تمرير المستخدم الذي يتجاوزها بسرعة.
observerOptions هدف { root: window, rootMargin: '50px', threshold: 0.01 } انظر قسم المراقب.
retry هدف { count: 3, delay: 2, acc: '*' } انظر قسم إعادة المحاولة.
...

 العثور على المزيد من الدعائم والأحداث.

المراقب

جميع الخصائص optional .

  • root: Element | null - العنصر الذي يتم استخدامه كمنفذ عرض للتحقق من رؤية الهدف. يجب أن يكون سلف الهدف. الإعدادات الافتراضية إلى منفذ عرض المتصفح إذا لم يتم تحديدها أو إذا null .

  • rootMargin: string - الهامش حول الجذر. يمكن أن يكون لها قيم مشابهة لخاصية هامش CSS ، على سبيل المثال "10px 20px 30px 40px" (أعلى ، يمين ، أسفل ، يسار). يمكن أن تكون القيم النسب المئوية. تعمل هذه المجموعة من القيم على النمو أو تقليص كل جانب من مربع ملعب عنصر الجذر قبل حساب التقاطعات.

  • threshold: number - رقم واحد بين 0 و 1 ، والذي يشير إلى النسبة المئوية لرؤية الهدف ، يجب تنفيذ رد اتصال المراقب. تعني قيمة 0 بمجرد مرئي بكسل واحد ، وسيتم تشغيل رد الاتصال. 1 يعني أن العتبة لا تعتبر مرورًا حتى يكون كل بكسل مرئيًا.

إعادة المحاولة

جميع الخصائص optional .

  • count: number - يحدد عدد المرات التي ترغب في إعادة محاولة. تعيينه على 0 سوف يعطين الترجع التلقائي.

  • delay: number - يحدد التأخير بين إعادة المحاولة في الثواني.

  • acc: string | false - يحدد كيف ينبغي أن يتراكم التأخير مع كل إعادة المحاولة. يقبل القيم التالية:

    • '*' (default) - اضرب التأخير بعد كل إعادة محاكمة لاحقة من قيمة delay المعطاة ، على سبيل المثال delay: 2 يعني أن إعادة المحاولة ستعمل بعد ثانيتين ، 4 ثوان ، 8 ثوان ، وما إلى ذلك.

    • '+' - تأخير الزيادة بعد كل إعادة محاكمة حسب قيمة delay المعطاة ، على سبيل المثال delay: 2 يعني أن إعادة المحاولة ستعمل بعد ثانيتين ، 4 ثوان ، 6 ثوان ، وما إلى ذلك.

    • false - حافظ على ثابت التأخير بين إعادة المحاولة ، على سبيل المثال delay: 2 يعني أن إعادة المحاولة ستعمل كل ثانيتين.

الطريقة الذكية لتحميل الصور

تحميل الصورة كسول عبر واجهة برمجة تطبيقات Observer Observer جيدة. ولكن هل يمكن أن يكون ذلك أكبر لتنزيل صورة فقط عندما يريد المستخدم رؤيتها؟ أو تجاوز التحميل كسول للصور المخزنة مؤقتًا؟ الإجابة هي نعم ويتم بالفعل دمج هذه الميزات في react-cool-img debounce و cache .

من خلال الدعامة debounce ، يمكن أن تنتظر الصورة لتنزيلها أثناء وجودها في مُعرفة وقت محدد. في الحالات التي يكون لديك فيها قائمة طويلة من الصور يمكن للمستخدم التمرير عبرها عن غير قصد. في هذا الوقت ، يمكن أن يسبب تحميل الصور مضيعة غير ضرورية لعرض النطاق الترددي ووقت المعالجة.

 استيراد IMG من "React-Cool-IMG" ؛ استيراد defaultimg من ".
  <imgplaceholder = {defaultimg} src = "https: // the-image-url" debounce = {1000} // الافتراضي هو 300 (ms) alt = "React Cool IMG"
  />) ؛

من خلال دعامة ذاكرة cache ، فإن الصور التي تم تخزينها مؤقتًا بالفعل ستؤدي إلى إحباط تحميل كسول حتى يزور المستخدم تطبيقك في المرة القادمة. يتم إعداد التحميل كسول لأي صور متبقية لم يتم تخزينها مؤقتًا. هذا مفيد لـ UX ، لأنه لا يوجد الكثير من العمل الإضافي لتحميل الصور المخزنة مؤقتًا على الفور وهو فوز سهل لجعل واجهة المستخدم تبدو أكثر سهولة.

 استيراد IMG من "React-Cool-IMG" ؛ استيراد defaultimg من ".
  <imgplaceholder = {defaultimg} src = "https: // the-image-url" cache // الافتراضي صحيح ، فقط لـ demoalt = "React Cool IMG"
  />) ؛

توفر JavaScript و SEO

هناك تحديان عند القيام بتحميل الصور كسول مع عرض من جانب الخادم. واحد هو توفر JavaScript الآخر هو SEO. لحسن الحظ ، يمكننا استخدام علامة <noscript> لحل هذه المشكلات. سيجعل الصورة الفعلية كاحتفال إذا تم تعطيل JavaScript وبالتالي لن يرى المستخدم الصورة التي تكون عالقة مع العنصر النائب. علاوة على ذلك ، تأكد من فهرسة الصورة <noscript> من فهرسة الصورة بواسطة روبوتات محرك البحث حتى لو لم يتمكنوا من فهم رمز JavaScript تمامًا. ألق نظرة على كيفية حدوث السحر.

 // src/img.tsxconst img = () => {
  // ...

  إرجاع (<> <imgclass = "image" src = "https: // the-placeholder-dimage" alt = "لا يوجد سحر"/> <noscript> <img class = "image" src = "https: // the the -صورة "alt =" السحر يبدأ هنا ... "/> </noscript> </>
  ) ؛} ؛

تقاطع المراقب polyfill

يتمتع Observer Intersection Posterver بدعم جيد بين المتصفحات ، لكنه ليس عالميًا. ستحتاج إلى متصفحات Polyfill التي لا تدعمها. Polyfills شيء يجب عليك القيام به بوعي على مستوى التطبيق. لذلك لا يشمل react-cool-img .

يمكنك استخدام polyfill's W3C:

 $ yarn add intersection-observer# أو $ npm install-save intersection-observer

ثم استيراده عند نقطة دخول التطبيق الخاص بك:

 استيراد "التقاطع-Observer" ؛

أو استخدم الواردات الديناميكية لتحميل الملف فقط عند الحاجة إلى polyfill:

 (Async () => {
  if (! ("intersectionObserver" في النافذة)) في انتظار الاستيراد ("التقاطع-observer") ؛}) () ؛

polyfill.io هي وسيلة بديلة لإضافة polyfill عند الحاجة.

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):


ويللي
؟

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل