العناصر النائبة والاحتياطية

In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.

حتى أن بعض العناصر ستكافئك على القيام بهذا الأامر عن طريق تخفيف القيود؛ على سبيل المثال، إذا قدمت عنصرًا نائبًا لـ amp-iframe، فيمكن استخدامه بالقرب من الجزء الأعلى من الصفحة (التي لن تعمل بدونها).

العناصر النائبة

يعمل العنصر الموسوم بالسمة placeholder كعنصر نائب لعنصر AMP الأصلي. وإذا تم تحديده، فيجب أن يكون عنصر placeholder عنصرًا تابعًا مباشرًا لعنصر AMP. وسيقوم العنصر الذي تم وسمه على أنه placeholder بـ fill عنصر AMP الأصلي دائمًا.

<amp-anim
  src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300"
>
  <amp-img
    placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill"
  >
  </amp-img>
</amp-anim>

بشكل افتراضي، يتم عرض العنصر النائب على الفور لعنصر AMP، حتى إذا لم يتم تنزيل موارد عنصر AMP أو تهيئتها. وبمجرد أن يصبح عنصر AMP جاهزًا، عادةً ما يقوم بإخفاء العنصر النائب وعرض المحتوى.

الاحتياطيات

يمكنك تحديد السمة fallback في عنصر ما للإشارة إلى سلوك الاحتياطي:

• لأي عنصر لا يدعمه المتصفح
• إذا فشل تحميل المحتوى (على سبيل المثال، حذف التغريدة)
• إذا كان نوع الصورة غير مدعوم (على سبيل المثال، WebP غير مدعوم في كل المتصفحات)

يمكنك تعيين السمة fallback إلى أي عنصر HTML، وليس فقط عناصر AMP. وإذا تم تحديده، فيجب أن يكون العنصر fallback تابعًا مباشرًا لعنصر AMP.

مثال: ميزة غير مدعومة

في المثال التالي، نستخدم السمة fallback لإبلاغ المستخدم بأن المتصفح لا يدعم ميزة معينة:

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

مثال: عرض تنسيقات صور مختلفة

في المثال التالي، نستخدم السمة fallback لإبلاغ المتصفح باستخدام ملف JPEG إذا كان تنسيق WebP غير مدعوم.

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>

تفاعل العناصر النائبة والاحتياطية

بالنسبة إلى مكونات AMP التي تعتمد على المحتوى الديناميكي (على سبيل المثال، amp-twitter، amp-list)، يعمل تفاعل العناصر النائبة والاحتياطية على النحو التالي:

1. عرض العنصر النائب أثناء تحميل المحتوى.
2. إذا تم تحميل المحتوى بنجاح، فيتم إخفاء العنصر النائب وعرض المحتوى.
3. في حالة فشل تحميل المحتوى:
   1. إذا كان هناك عنصر احتياطي، فيتم عرض العنصر الاحتياطي.
   2. بخلاف ذلك، يتم الاستمرار في عرض العنصر النائب
      .

إخفاء مؤشرات التحميل

يسمح للعديد من عناصر AMP بإظهار "مؤشر التحميل"، وهو رسم متحرك أساسي يوضح أن العنصر لم يتم تحميله بالكامل بعد. ويمكن للعناصر تعطيل هذا السلوك عن طريق إضافة السمة noloading

• Written by @pbakaus
  with contributions from @bpaduch