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

اسکریپت بارگذاری تصاویر imgLazyLoad

بارگذاری تنبل تصاویر (Images Lazy Loading) یک تکنیک بهینه سازی صفحات و بهبود تجربه کاربری است. این تکنیک، تصاویر رو تنها زمانی نشون میده که به اونها نیاز داشته باشیم. به طور میانگین، بیشتر از ۶۰% حجم خروجی وبسایت ها رو تصاویر تشکیل دادند (منبع) و این موضوع -وقتی تعداد و حجم تصاویر زیاد و سنگین باشند- در سرعت لود، پهنای باند و رضایت کاربران شما تأثیر منفی خواهد گذاشت. اینجاست که بازهم قدرت تنبلی اثبات میشه و این سبک بارگذاری با یک منطق ساده  “نمایش تصاویر -> در صورتی که برای کاربر قابل مشاهده باشد” یا به عبارت دیگه “نمایش تصاویر -> تنها زمانی که در اسکرول صفحه قرار بگیرد” اون شعر برو کار میکن سعدی رو له میکنه. خخخخ 🙂

* نکته: بارگذاری تنبل چند عیب کوچیک هم داره! به عنوان مثال: در بیشتر افزونه های Lazy Loading ویژگی src تصویر پشتیبانی نمیشه (یا اینکه با تصاویر و انیمیشن Sample مقدار دهی میشه) و تصویر اصلی شما در ویژگی جدیدی به نام data-src قرار میگیره و این موضوع با سینتکس استاندارد HTML5 همخونی نداره. (البته این هم بدون راه حل نیست…)

نحوه استفاده از بارگذاری تنبل


برای پیاده سازی این تکنیک، افزونه های جی کوئری زیادی هستند که هر کدوم ویژگی های مخصوص به خودشون رو دارند. در پست امروز، ما یک اسکریپت ساده و کم حجم رو برای شما همراهان جان آماده کردیم که با استفاده از اون میتونید تکنیک Lazy Loading رو به سادگی پیاده سازی کنید:

۱- فایل پیوستی رو از بخش پایینی این نوشته دانلود کنید.

۲- کتابخانه های Jquery و imglazyload رو در صفحه فراخوانی کنید:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="imglazyload.js"></script>

۳- تصاویر (تگ های img) رو با ویژگی های src و data-src به صفحه اضافه کنید: (تصویر loading.svg انیمیشن بارگذاری تصاویر است)

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

۴- تابع imgLazyLoad رو به سلکتور تصاویر، تخصیص بدید:

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

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

$('#box img').imgLazyLoad({
	container: window,
	effect: 'fadeIn',
	speed: 600,
	delay: 400,
	callback: function(){
		$( this ).css( 'opacity', .99 );
	}
});

۵- پایان 🙂

دیدگاه کاربران در مورد این نوشته

  1. ممنون از مطلبتون

    توسط Deep english پاسخ

  2. آیا این کار در سئو تاثیر منفی داره؟(یه جایی شنیدم که میگفت lazy load باعث میشه مطالب در گوگل ایندکس نشن) و این که اگه ممکنه آموزش lazy load متن رو هم بزارید

    توسط علی پاسخ

    1. سلام. در داخل متن هم اشاره کردم که به خاطر عدم وجود ویژگی src ممکنه تأثیر منفی در ایندکس تصاویر داشته باشه! اما راه حل هایی هم هست که نمونش رو میتونید در لینک زیر مشاهده کنید:
      http://tiny.alimir.ir/4Mf

      توسط علی میرزائی پاسخ

  3. چیکار کنیم عکس ها کش بشه و دفعه دوم که کاربر وارد از صقفحه میشه از عکس کش شده استفاده بشه؟
    الان با هر رفرش صفحه باید منتشر عکسی باشیم که قبلا هم باز شده که این درست نیست!

    توسط کتاب کوله پاسخ

  4. سلام خسته نباشید گفته بودید که راهی برای ولید کردن تگ های img که حاوی اتربیوت src نیستند هست
    میشه توضیح بدید چطور ولیدشون کنم؟

    توسط mojtaba پاسخ

  5. سلام

    مطالب واقعا مفیدی دارید ،، مرسی از اینکه هستید

    من همیشه این جا میام

    توسط استیک آلکالاین پاسخ

  6. مطلب جالبی بود.
    راستی تبریک برای جشنواره وب! 🙂

    توسط امیر پاسخ

    1. سلام. ممنون امیر جان. {گل}

      توسط علی میرزائی پاسخ

  7. عذر میخوام که سوالمو اینجا مطرح میکنم
    من یه سوال داشتم … کوتاه و مختصر عرض میکنم

    من میخوام یه ابزارک داشته باشم که بتونم به عنوان مثال ۱۰ مطالب برتر سایتم رو داخلش قرار بدم (به صورت دستی وارد کنم … اتوماتیک نباشه)
    یه تک باکس برای عنوان
    یه تکس باکس برای لینک یا همون url
    نمیخوام از کد HTML داخل ابزارک استفاده کنم … ( HTML , CSS ) رو در قبلا نوشته باشم و از همون کد های نوشته شده ها استفاده کنم
    و تعداد مطالب درج شده هم دست خودم باشه . یا اصلا نامحدود باشه
    لطفا در سطح مبتدی راهنمایی کنید
    مچکرم … زودتر پاسخ بدید ممنون میشم
    تصویر زیر رو هم یه نگاه بندازید که بهتر متوجه منظورم بشید
    http://s6.picofile.com/file/8239737134/box.png

    توسط مشکی پوش پاسخ

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