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 Custom Homepage thumbnails, 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.