با سلام و آرزوی خسته نباشید خدمت کاربران عزیز سایت پگاسوس گراف .

مقدمه

در دنیای وب، سرعت بارگذاری صفحات یکی از عوامل کلیدی در تجربه کاربری و بهینه‌سازی موتورهای جستجو (SEO) است. Lazy Loading یا بارگذاری تنبل، تکنیکی است که به تأخیر در بارگذاری منابع (مانند تصاویر، ویدئوها و GIFها) تا زمانی که کاربر به آن‌ها نیاز داشته باشد، اشاره دارد. در این مقاله، به بررسی مفهوم Lazy Loading، مزایا، نحوه پیاده‌سازی آن و نکات مهم خواهیم پرداخت. همچنین، به اضافه کردن GIFها با استفاده از Lazy Loading نیز خواهیم پرداخت.

سربرگ های مقاله :

1 . lazy loading چیست ؟

2 . مزایای lazy loading

3 . نحوه پیاده سازی lazy loading

4 . نکات مهم

5 . نتیجه گیری

lazy loading چیست ؟

Lazy Loading تکنیکی است که به تأخیر در بارگذاری منابع اشاره دارد. به عبارت دیگر، به جای بارگذاری تمام محتوا به طور همزمان، تنها محتوایی که در صفحه قابل مشاهده است بارگذاری می‌شود و بقیه منابع تنها زمانی بارگذاری می‌شوند که کاربر به آن‌ها اسکرول کند.

مزایای lazy loading :

1. بهبود سرعت بارگذاری : با بارگذاری تنها محتوای ضروری، زمان بارگذاری صفحه کاهش می‌یابد.
2. کاهش مصرف پهنای باند : فقط محتوای مورد نیاز بارگذاری می‌شود، که می‌تواند به صرفه‌جویی در مصرف پهنای باند کمک کند.
3. بهبود تجربه کاربری : کاربران می‌توانند سریع‌تر به محتوای مورد نظر خود دسترسی پیدا کنند.
4. SEO بهتر : با کاهش زمان بارگذاری، احتمال افزایش رتبه سایت در نتایج جستجو وجود دارد.

نحوه پیاده سازی lazy load :

1. استفاده از HTML5

به شما این امکان را می‌دهد که از ویژگی loading در تگ <img> استفاده کنید:

<img src="image.jpg" loading="lazy" alt="Description">

2. استفاده از JavaScript

اگر به کنترل بیشتری نیاز دارید، می‌توانید از JavaScript برای پیاده‌سازی Lazy Loading استفاده کنید. در زیر یک نمونه ساده آورده شده است:

<img class="lazy" data-src="image.jpg" alt="Description"> <script> document.addEventListener("DOMContentLoaded", function() { const lazyImages = document.querySelectorAll('img.lazy'); const lazyLoad = function() { lazyImages.forEach((img) => { if (img.getBoundingClientRect().top < window.innerHeight && img.src !== img.dataset.src) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); }; window.addEventListener('scroll', lazyLoad); lazyLoad(); // Initial load }); </script>

3. استفاده از کتابخانه‌های جاوااسکریپت

کتابخانه‌های مختلفی وجود دارند که می‌توانید از آن‌ها برای پیاده‌سازی Lazy Loading استفاده کنید. یکی از محبوب‌ترین آن‌ها lazysizes است:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async=""></script> <img data-src="image.jpg" class="lazyload" alt="Description">

اضافه کردن GIF با

Lazy Loading

برای اضافه کردن GIFها با استفاده از Lazy Loading، می‌توانید از روش‌های مشابهی که برای تصاویر استفاده می‌شود، بهره ببرید. در زیر یک مثال کامل آورده شده است:

<img class="lazyload" data-src="http://up.pegasusgraph.ir/view/3298435/post-65.png" src="http://up.pegasusgraph.ir/view/3914536/lazy.gif" alt="خرید قالب اختصاصی تک صدا"> <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async=""></script>

در زیر دو نمونه از gif های کاربردی قرار می دم بسته به سلیقه خود می توانید استفاده کنید :

     

توضیحات:

1. کلاس lazyload: این کلاس به تصویر اضافه شده است تا به کتابخانه lazysizes اطلاع دهد که این تصویر باید به صورت تنبل بارگذاری شود.

2. ویژگی data-src: این ویژگی حاوی آدرس تصویر اصلی (در اینجا PNG) است که باید تنها زمانی بارگذاری شود که تصویر در نزدیکی نمای کاربر قرار گیرد.

3. ویژگی src: این ویژگی حاوی آدرس GIF است که به عنوان تصویر پیش‌فرض نشان داده می‌شود. این GIF تا زمانی که تصویر اصلی بارگذاری شود، قابل مشاهده خواهد بود.

4. کتابخانه lazysizes: این کتابخانه به شما کمک می‌کند تا به راحتی Lazy Loading را پیاده‌سازی کنید. با اضافه کردن این اسکریپت، تصاویر با کلاس lazyload تنها زمانی بارگذاری می‌شوند که در محدوده دید کاربر قرار بگیرند.

نکات مهم

• تست و بهینه‌سازی: پس از پیاده‌سازی Lazy Loading، حتماً عملکرد وب‌سایت خود را تست کنید و مطمئن شوید که بارگذاری محتوا به درستی انجام می‌شود.
• سازگاری با مرورگرها: اطمینان حاصل کنید که قابلیت Lazy Loading شما با مرورگرهای مختلف سازگار است.
• توجه به SEO: در هنگام پیاده‌سازی، به یاد داشته باشید که موتورهای جستجو باید قادر به ایندکس کردن محتوای شما باشند. از تگ‌های noscript برای ارائه محتوای غیر جاوااسکریپت به موتورهای جستجو استفاده کنید.

نتیجه‌گیری :