ما نسخه آزمایشی lazy load را فقط در صفحه index-lazy.html پیاده سازی کرده ایم. اگر هر توسعه دهنده/کاربری بخواهد این امکان را در دیگر صفحات وب فعال کند کافیست برای فعال کردن lazy load، توضیحات زیر را مطالعه کند.

افزودن فایل JS

<script src="assets/vendor/vanilla-lazyload/lazyload.min.js"></script>

برای اینکه محتوای شما توسط LazyLoad بارگذاری شود، باید قبل از src از data- استفاده کنید و از کلاس lazy استفاده شود مانند مثال زیر:

تصاویر Lazy

<img class="lazy" data-src="assets/images/blog/4by3/03.jpg" alt="Image">

تصاویر Lazy با کیفیت پایین

<img class="lazy" data-src="assets/images/blog/4by3/03.jpg" src="lowQualityImage.jpg" alt="Image">

پس زمینه Lazy

<div class="lazy" data-bg="assets/images/blog/1by1/02.jpg" style="background-position: center left; background-size: cover;"></div>

کسب اطلاعات بیشتر پلاگین LazyLoad در سایت گیت هاب