LazyLoad ابزاری برای کاهش زمان لود صفحات سایت

افزایش سرعت لود صفحات وب

افزایش سرعت لود صفحات وب

ممکنه در صفحاتی که طراحی میکنیم ، تصاویر زیادی مورد استفاده قرار گرفته باشه ، یک سری تصاویر بالای صفحه و و به همین ترتیب تا پائین …. . اما آیا همیشه ، کاربر تمام صفحه رو میبینه؟ آیا مطمئنید که اسکرول صفحه رو به پائین هدایت میکنه و تا اخرین تصاویر سایت رو مشاهده میکنه؟ آیا میدونستید زمان بسیار زیادی از لود یک صفحه وب ، صرفِ بارگذاری تصاویر میشه؟ فرض کنید وارد یک سایت خبری شدید. حدودا ۵۰ تا عکس مربوط به خبرهای مختلف لود میشه. ممکنه شما متن مورد نظرتون رو توی همین بالای سایت پیدا کنید و اصلا حتی نگاه هم به پائین سایت نکنید. اما به اجبار ، تمام تصاویر برای شما لود شدند!

راهکار جالب توجهی که اخیرا توسط متخصصین وب طراحی شده ، یک افزونه‌ی بسیار سبک برای فریم‌ورک جاوااسکریپتی ِ موتولز ( Mootools ) به نام LazyLoad هست که در ادامه معرفیش میکنم.

لودر

لودر

کاری که این افزونه انجام میده اینه که در ابتدا ، صفحه رو بدون تصاویر متن ها لود میکنه. عملا خیلی خیلی سریع این لود انجام میشه. در تنظیمات این افزونه ، ما یک تصویر اولیه ارائه میدیم که زمانی که تصاویر هنوز لود نشدن ، اون تصویر نشون داده بشه. به عنوان مثال میتونیم یک تصویر لودینگ مثل همین شکل لودر قرار بدیم.

روش استفاده هم که بسیار آسونه. به این ترتیب که ابتدا فایل موتولز ( Mootools ) رو بارگذاری میکنید ، بعد هم کدهای افزونه زیر رو مورد استفاده قرار میدهیم.

var LazyLoad = new Class({

	Implements: [Options,Events],

	/* additional options */
	options: {
		range: 200,
		image: 'blank.gif',
		resetDimensions: true,
		elements: 'img',
		container: window,
		fireScroll: true,
		mode: 'vertical'
	},

	/* initialize */
	initialize: function(options) {

		/* vars */
		this.setOptions(options);
		this.container = document.id(this.options.container);
		this.elements = $$(this.options.elements);
		var axis = (this.options.mode == 'vertical' ? 'y': 'x');
		this.containerDimension = this.container.getSize()[axis];
		this.start = 0;

		/* find elements remember and hold on to */
		this.elements = this.elements.filter(function(el) {
			/* reset image src IF the image is below the fold and range */
			if(el.getPosition(this.container)[axis] > this.containerDimension + this.options.range) {
				el.store('oSRC',el.get('src')).set('src',this.options.image);
				if(this.options.resetDimensions) {
					el.store('oWidth',el.get('width')).store('oHeight',
el.get('height')).set({'width':'','height':''});
				}
				return true;
			}
		},this);

		/* create the action function */
		var action = function() {
			var cpos = this.container.getScroll()[axis];
			if(cpos > this.start) {
				this.elements = this.elements.filter(function(el) {
					if((this.container.getScroll()[axis] + this.options.range + this.containerDimension) >= el.getPosition(this.container)[axis]) {
						if(el.retrieve('oSRC')) { el.set('src',el.retrieve('oSRC')); }
						if(this.options.resetDimensions) {
							el.set({
								width: el.retrieve('oWidth'),
								height: el.retrieve('oHeight')
							});
						}
						this.fireEvent('load',[el]);
						return false;
					}
					return true;
				},this);
				this.start = cpos;
			}
			this.fireEvent('scroll');
			/* remove this event IF no elements */
			if(!this.elements.length) {
				this.container.removeEvent('scroll',action);
				this.fireEvent('complete');
			}
		}.bind(this);

		/* listen for scroll */
		this.container.addEvent('scroll',action);
		if(this.options.fireScroll) { this.container.fireEvent('scroll'); }
	}
});

/* usage */
window.addEvent('domready',function() {
	var lazyloader = new LazyLoad();
});

این کد رو میتونیم به دو روش مورد استفاده قرار بدیم. یکی اینکه مستقیما اون رو در هدر سایت قرار بدیم ( روش شماره یک ) و یا اینکه اون رو در یک فایل مجزا قرار داده و فراخوانیش کنیم ( روش شماره دو ). گرچه در روش اول چند میلی ثانیه سرعت سایت بیشتره ، اما نظم کدها به هم میریزه. در روش دوم ، یک درخواست بیشتر از روش اول برای سرور ارسال میشه و  یک فایل مجزا باید لود بشه! من برای استفاده این افزونه ، روش اول رو توصیه میکنم.

روش اول:


روش دوم:


در این افزونه چند پارامتر رو ما میتونیم تنظیم کنیم. این  پارامترها در زیر آورده شدند و در خصوص بعضی از اونها توضیح میدم:

options: {
		range: 200,
		image: 'blank.gif',
		resetDimensions: true,
		elements: 'img',
		container: window,
		fireScroll: true,
		mode: 'vertical'
	},

range بیانگر فاصله بر اساس پیکسل از اون تصویر هست که اگر اسکرولر کاربر به اون حدود رسید تصویر باید لود بشه.

image آدرس تصویری هست که قراره قبل از لود شدن تصویرها به جاشون نمایش داده بشه. مثل همین لودینگی که من بالای متنم گذاشتم.

elements نام المنتی هست که تصاویری که درونش قرار دارند باید از قوانین این افزونه پیروی کنند. خب معمولا تصاویری ه در صفحه نمایش داده میشن ( بجز اونهایی که با CSS درج میشن و مورد استاده قرار میگین با این المنت ، img ، تعریف میشن.

راستی ، یادتون باشه که فایل موتولز رو هم اینتوری فراخوانی میکنیم: (فایل این افزونه رو هم بعد از اون آوردم )



اگر جائی استفاده کردید توی نظرات آدرسش رو بذارید تا دوستانمون ببینن.

موفق باشید و پایدار.

تمرکز موضوع: ,,, نوشته شده در: ۱۵ مرداد ۱۳۸۹

درباره محمد رشیدی

من یک کارآفرین خلاق و جوان هستم. تحصیلات، تخصص و فعالیتم در حوزه وب و تجارت الکترونیک است. عاشقانه و با تمام وجود در این زمنیه تلاش و فعالیت میکنم. تفکری بلندمدت دارم. به کیفیت به شدت اهمیت میدهم. به عنوان یک مخاطب به موسیقی هم خیلی علاقه دارم. در ابعاد مختلف وب، برنامه نویسی حرفه‌ای میکنم و در سالهای اخیر، بخش بسیار زیادی از مطالعاتم در زمینه کسب و کار، داده کاوی، وب اپلیکیشن، طراحی رابط کاربری، کاربردپذیری و تجربه کاربر قرار گرفته است.
نظرات و دیدگاهها (4)
    • این افزونه فقط روی تصاویر موجود در تگ مشخصی که اینجا img تعریف کردیم میتونه تأثیرگذار باشه.

      در حال حاظر اگر شما از این افزونه استفاده کنید و تصویر هدر و فوتر رو در قالب img بیارید ، نه در قالب CSS ، مطمئنا اول تصویر هدر لود میشه و اگر کاربر صفحه رو به نزدیکیهای فوتر اسکرول کرد ، اونوقت تصویر فوتر که در تگ img آورده شده لود میشه.

      البته این مبحثی که مطرح کردید رو یادداشت کردم که بررسیش کنم. اگر به نتیجه رسیدم حتما در قالب یک متن جدید منتشرش میکنم.

      ممنونم از اینکه وقت میذارید و مطالب بلاگ رو مطالعه میکنید.

پاسخ دهید

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


*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>