افزودن

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 ، تعریف میشن.

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

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

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