Hugo Dark Theme Site Generator https://after-dark.habd.as
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

lazy-loading.id.md 1.8KB

+++ title = “Lazy Loading” description = “Tunda pemuatan gambar, iframe dan skrip.” categories = [“experience”] tags = [“performance”, “images”, “graphics”] feature = [“code highlighter”, “related content”, “snippets”] copyright owner = “Josh Habdas” date = “2019” license = “agpl-3.0-or-later” +++

After Dark menggunakan {{< external href=“https://github.com/aFarkas/lazysizes” text=“lazySizes” />}} untuk memprioritaskan pemuatan sumber daya eksternal tertentu untuk meningkatkan waktu pemuatan halaman dan membantu mengurangi konsumsi bandwith secara keseluruhan.

Lazy loading bekerja secara otomatis untuk Post Images dan ketika menggunakan Figure Shortcode, atau terkait dengan Snippet, seperti yang terlihat sebagai berikut:

{{< figure src=“https://source.unsplash.com/Y-w15LfHO8w/5184x3456” lqipsrc=“https://source.unsplash.com/Y-w15LfHO8w/1080x720” caption=“Be Creative” attr=“AK¥N Cakiner” attrlink=“https://unsplash.com/@akin

}}

Untuk menggunakan lazy loading di Custom Layouts atau saat membuat milik anda sendiri Shortcodes menambahkan atribut kelas lazyload dan data yang relevan seperti yang ditunjukkan di sini:

<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">
<!-- responsive with automatic sizes calculation -->
<img
  data-sizes="auto"
  data-src="image2.jpg"
  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
  class="lazyload">
<!-- iframe example -->
<iframe frameborder="0"
  class="lazyload"
  allowfullscreen
  data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Lihat {{< external href=“https://github.com/aFarkas/lazysizes” text=“lazySizes” />}} sebagai informasi dan contoh tambahan.