وبگرانمقالاتآموزش وردپرسبارگذاری تصاویر سایت به سبک Lazy Loading

بارگذاری تصاویر سایت به سبک Lazy Loading

  • مدیر
  • 22 می, 2020
  • 309 بازدید
بارگذاری تصاویر سایت به سبک Lazy Loading

بارگذاری تصاویر سایت به سبک Lazy Loading

بیشتر از 60 درصد محتوای سایت های امروزی را تصاویر تشکیل می دهند و زمانی که صفحات دارای تصاویر باشند سرعت لود صفحات بالا رفته و در نتیجه کاربر باید زمان طولانی تری را منتظر لود شدن صفحات بماند. اینجاست که نیاز به Lazy Loading بیشتر مشخص می شود. این تکنیک درحقیقت یک راهکار بارگذاری تصاویر است که تنها زمانی که نیاز باشد و صفحه توسط کاربر اسکرول شود اقدام به نشان دادن تصاویر خواهد کرد.
در بسیاری از افزونه های Lazy Loading سیستم مدیریت محتوای وردپرس ویزگی src پشتیبانی نمی شود و در حقیقت نیاز به ویژگی data-src دارد که این با سینتکس استاندارد HTML5 مقایرت دارد. درنتیجه تصمیم گرفتیم این ویژگی مهم و پر اهمیت را هم با کد نوسی و هم با افزونه به شما کاربران گرامی توضیح دهیم.

شیوه استفاده از Lazy Loading

ابتدا عکس های مورد نظر را مانند کد زیر آماده می کنیم.
دقت کنید loading.png تصویر در هنگام لود شدن می باشد.

<div id="imgs">
<img data-src="1.jpg" src="loading.png">
<img data-src="2.jpg" src="loading.png">
<img data-src="3.jpg" src="loading.png">
</div>

کتابخانه های جی کوئری و imglazyload را در ابتدای صفحه فراخوانی کنید.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://github.com/Barrior/imgLazyLoad/blob/master/imglazyload.js"></script>

تابع imgLazyLoad را به سلکتور تصاویر اختصاص دهید

<script>
	$( '#imgs img' ).imgLazyLoad();
</script>

تابع imgLazyLoad چند آپشن اضافی هم دارد که می توانید از آن ها هم ماستفاده کنید.

$('#imgs img').imgLazyLoad({

  // سلکتور جی کوئری
  container: win,

  // انیمیشن جی کوئری: show, slideDown, etc
  effect: 'fadeIn',

  // سرعت انیمیشن
  speed: 600,

  // مکث انیمیشن
  delay: 400,

  // تابع برگشتی
  callback: function(){}

});

اگر از وردپرس استفاده میکنید به کمک افزونه هایی مثل a3 Lazy Load می توانید این قابلیت را به پوسته خود اضافه کنید.





2 دیدگاه برای این مطلب ثبت شده است

  • افزونه هم داره؟

    1. بله در آینده حتما قرار میدم

  • دیدگاه خود را بیان کنید :

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


    *
    *