Mã giữ chỗ & phương án dự phòng

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

Một số yếu tố thậm chí còn thưởng cho bạn nếu bạn đáp ứng điều đó bằng cách nới lỏng các hạn chế – ví dụ, nếu bạn cung cấp một mã giữ chỗ cho amp-iframe, nó có thể được sử dụng ở gần đầu trang (vốn không thể được thực hiện nếu thiếu nó).

Mã giữ chỗ

Yếu tố được đánh dấu thuộc tính placeholder (mã giữ chỗ) sẽ hoạt động như mã giữ chỗ cho yếu tố AMP cha. Nếu được quy định, một yếu tố placeholder (mã giữ chỗ) phải là một con trực tiếp của yếu tố AMP. Yếu tố được đánh dấu là một placeholder (mã giữ chỗ) sẽ luôn fill (lấp đầy) yếu tố AMP của cha.

<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>

Theo mặc định, mã giữ chỗ sẽ được hiển thị ngay lập tức cho yếu tố AMP, kể cả khi tài nguyên của yếu tố AMP chưa được tải về hoặc bắt đầu. Sau khi đã sẵn sàng, yếu tố AMP thường sẽ ẩn mã giữ chỗ của nó và hiển thị nội dung.

Phương án dự phòng

Bạn có thể quy định thuộc tính fallback (phương án dự phòng) cho một yếu tố để chỉ báo hành vi phương án dự phòng:

• cho mọi yếu tố mà trình duyệt không hỗ trợ
• nếu nội dung không được tải (ví dụ, Tweet đã bị xóa)
• Nếu loại ảnh không được hỗ trợ (ví dụ, WebP không được hỗ trợ trong mọi trình duyệt)

Bạn có thể thiết lập thuộc tính fallback (phương án dự phòng) cho mọi yếu tố HTML, không chỉ các yếu tố AMP. Nếu được quy định, yếu tố fallback (phương án dự phòng) phải là một con trực tiếp của yếu tố AMP.

Ví dụ: Tính năng không được hỗ trợ

Trong ví dụ sau, chúng tôi sử dụng thuộc tính fallback (phương án dự phòng) để thông báo với người dùng rằng trình duyệt này không hỗ trợ một tính năng cụ thể:

<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>

Ví dụ: Phục vụ các định dạng ảnh khác nhau

Trong ví dụ sau, chúng tôi sử dụng thuộc tính fallback (phương án dự phòng) để yêu cầu trình duyệt sử dụng tập tin JPEG nếu định dạng WebP không được hỗ trợ.

<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>

Tương tác giữa mã giữ chỗ và phương án dự phòng

Đối với các thành phần AMP phụ thuộc vào nội dung động (ví dụ như amp-twitter, amp-list), việc tương tác giữa phương án dự phòng và mã giữ chỗ hoạt động như sau:

1. Hiển thị mã giữ chỗ khi nội dung đang tải.
2. Nếu nội dung được tải thành công, ẩn mã giữ chỗ và hiển thị nội dung.
3. Nếu nội dung không thể được tải:
   1. Nếu có một yếu tố phương án dự phòng, hiển thị phương án dự phòng.
   2. Nếu không, tiếp tục hiển thị mã giữ chỗ.

Ẩn các chỉ báo tải

Rất nhiều yếu tố AMP được cho phép hiển thị một "chỉ báo tải", vốn là một hình hoạt họa cơ bản cho thấy rằng yếu tố này chưa được tải đầy đủ. Các yếu tố có thể bỏ hành vi này bằng cách thêm thuộc tính noloading.

• Written by @pbakaus
  with contributions from @bpaduch