MooTools-এ Lazy Loading এবং DOM Caching দুটি গুরুত্বপূর্ণ কৌশল যা ওয়েব পেজের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে ব্যবহৃত হয়। Lazy Loading এক ধরনের কৌশল, যার মাধ্যমে শুধুমাত্র যখন প্রয়োজন হয় তখনই উপাদান বা ছবি লোড করা হয়, এবং DOM Caching ডোম উপাদানগুলোর পুনরায় রেন্ডারিংয়ের প্রয়োজন না হওয়ার জন্য কaching করে ফেলা হয়। এগুলোর মাধ্যমে ওয়েব পেজের লোডিং সময় কমানো যায় এবং ইউজার ইন্টারঅ্যাকশনে মসৃণতা আসে।
Lazy Loading
Lazy Loading এমন একটি কৌশল যেখানে ইমেজ, ভিডিও বা অন্যান্য রিসোর্সগুলি কেবল তখনই লোড হয়, যখন সেগুলি স্ক্রীনে দৃশ্যমান হয়। এটি ওয়েব পেজের লোডিং সময়কে উল্লেখযোগ্যভাবে কমাতে সহায়তা করে, বিশেষ করে যখন অনেক ইমেজ বা ভারী রিসোর্স থাকে।
MooTools-এ Lazy Loading প্রয়োগ
MooTools ব্যবহার করে lazy loading ইমপ্লিমেন্ট করতে আমরা ইমেজগুলোর scroll ইভেন্ট হ্যান্ডল করে চেক করতে পারি যে ইমেজটি স্ক্রিনে এসেছে কি না। যখন ইমেজটি স্ক্রিনে আসে, তখন সেটি লোড করা হয়।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Lazy Loading</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var images = $$('img.lazyload'); // সকল lazyload ক্লাসের ইমেজ সিলেক্ট করা
// স্ক্রল ইভেন্ট হ্যান্ডল করা
window.addEvent('scroll', function() {
images.each(function(img) {
// চেক করা যে ইমেজ স্ক্রিনে এসেছে কি না
if (img.getCoordinates().top < window.getScroll().y + window.getSize().y) {
// ইমেজ লোড করা
img.set('src', img.get('data-src'));
img.removeClass('lazyload'); // lazyload ক্লাস সরানো
}
});
});
});
![Lazy Image 1]()
![Lazy Image 2]()
![Lazy Image 3]()
এখানে:
data-src ব্যবহার করে ইমেজের আসল সোর্স রাখা হয়েছে, এবং src প্রপার্টি কেবল তখন সেট করা হবে যখন ইমেজ স্ক্রিনে আসবে।getCoordinates() এবং getScroll() মেথড ব্যবহার করে চেক করা হচ্ছে যে ইমেজটি স্ক্রিনে এসেছে কি না।scroll ইভেন্টের মাধ্যমে ইমেজগুলির lazy loading সম্পন্ন হচ্ছে।
DOM Caching
DOM Caching এমন একটি কৌশল যেখানে ওয়েব পেজের ডোম এলিমেন্টগুলির রেফারেন্স কেবল একবার নেওয়া হয় এবং পরবর্তী সময়ে সেগুলি পুনরায় ক্যাশ থেকে অ্যাক্সেস করা হয়, যাতে বারবার DOM ট্রাভার্স (যেমন getElementById(), querySelector()) করার প্রয়োজন না হয়। এটি ওয়েব পেজের পারফরম্যান্স উন্নত করতে সাহায্য করে।
MooTools-এ DOM Caching
MooTools এর document.id() মেথড ব্যবহার করে আপনি ডোম এলিমেন্টের রেফারেন্স ক্যাশ করতে পারেন, এবং পরবর্তীতে সেই এলিমেন্টে যেকোনো অপারেশন করতে পারেন।
window.addEvent('domready', function() {
// DOM ক্যাশিং করা
var element = document.id('myElement'); // একবার এলিমেন্ট সিলেক্ট করা
// ক্যাশ থেকে এলিমেন্টে স্টাইল পরিবর্তন করা
element.setStyle('color', 'blue');
element.setStyle('background-color', 'yellow');
});
এখানে:
document.id() ব্যবহার করে myElement এলিমেন্টটি একবার সিলেক্ট করা হয়েছে, এবং পরবর্তীতে এটি ক্যাশে রাখা হয়েছে।- এই ক্যাশ করা এলিমেন্টে
setStyle() মেথড ব্যবহার করে স্টাইল পরিবর্তন করা হয়েছে। এতে বারবার DOM ট্রাভার্স করার প্রয়োজন হয় না।
DOM Caching এর সুবিধা:
- পারফরম্যান্স বৃদ্ধি: DOM ট্রাভার্স বারবার করার পরিবর্তে একবার ক্যাশ করে রাখতে পারলে কোড আরও দ্রুত হয়।
- স্মার্ট মেমরি ব্যবস্থাপনা: ক্যাশ করা এলিমেন্টগুলির মাধ্যমে অতিরিক্ত মেমরি ব্যবহারের ঝামেলা এড়ানো যায়।
Lazy Loading এবং DOM Caching একসাথে ব্যবহার
MooTools-এ আপনি Lazy Loading এবং DOM Caching একসাথে ব্যবহার করে ওয়েব পেজের পারফরম্যান্স আরও উন্নত করতে পারেন। যেমন, ইমেজ লোড করার সময় DOM ক্যাশিং ব্যবহার করা এবং পরে সেই ক্যাশ করা ইমেজ গুলির উপর ইফেক্ট প্রয়োগ করা।
উদাহরণ:
Lazy Loading and DOM Caching
('img.lazyload'); // Lazy load ইমেজ সিলেক্ট করা
// স্ক্রল ইভেন্ট হ্যান্ডল করা
window.addEvent('scroll', function() {
images.each(function(img) {
if (img.getCoordinates().top < window.getScroll().y + window.getSize().y) {
img.set('src', img.get('data-src'));
img.removeClass('lazyload');
}
});
});
// DOM ক্যাশিং
var button = document.id('loadButton'); // বাটন ক্যাশ করা
button.addEvent('click', function() {
alert('Button clicked!');
});
});
</script>
</head>
<body>
<img class="lazyload" data-src="image1.jpg" alt="Lazy Image 1" width="400">
<img class="lazyload" data-src="image2.jpg" alt="Lazy Image 2" width="400">
<button id="loadButton">Click me</button>
</body>
</html>
এখানে:
- Lazy Loading ইমেজে কার্যকরভাবে ব্যবহার করা হয়েছে এবং DOM ক্যাশিং ব্যবহার করে বাটন ক্লিক ইভেন্ট হ্যান্ডলিং করা হয়েছে।
সারাংশ
MooTools-এ Lazy Loading এবং DOM Caching দুটি অত্যন্ত শক্তিশালী কৌশল যা ওয়েব পেজের পারফরম্যান্স উন্নত করতে সহায়তা করে। Lazy Loading শুধুমাত্র প্রয়োজনীয় রিসোর্স লোড করার কৌশল, এবং DOM Caching ডোম এলিমেন্টের রেফারেন্স একবার ক্যাশ করে পরবর্তীতে দ্রুত ব্যবহার করা যায়। এই কৌশলগুলো ব্যবহার করলে ওয়েব অ্যাপ্লিকেশন দ্রুত লোড হয় এবং স্মুথ ইউজার এক্সপেরিয়েন্স প্রদান করে।
Read more
