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

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

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

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

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

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

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

۱- ابتدا فایلی که در پیوست زیر قرار دارد را دانلود کنید.
۲- کتابخانه های جی کوئری و imglazyload را در ابتدای صفحه فراخوانی کنید.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22imglazyload.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

۳- تصاویر مورد نظرتان را با ویژگی های src و data-src به صفحه خود اضافه کنید. loading.svg=انیمیشن بارگذاری صفحه

<div id="your-box">
<img data-src="image1.jpg" src="loading.svg">
<img data-src="image2.jpg" src="loading.svg">
<img data-src="image3.jpg" src="loading.svg">
</div>

۴- تابه imglazyload را به سلکتور عکس هایتان مربوط کنید.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%24(%20'%23box%20img'%20).imgLazyLoad()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

۵- این هم آپشن های اضافی که در صورت نیاز به صفحه خود اضافه کنید

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

اشتراگ گذاری در:
اگه خوبه لایکش کن