জেকুয়েরি load() মেথড
সংজ্ঞা এবং ব্যবহার
জেকুয়েরি ভার্সন ১.৮ এ, load() মেথডের অনুমোদন বাতিল করা হয়েছে।
load() মেথড load ইভেন্টে একটি ইভেন্ট হ্যান্ডলার যোগ করে।
নির্ধারিত এলিমেন্টটি লোড হলে load ইভেন্টটি ঘটে।
এই ইভেন্টটি URL সহ এলিমেন্টে কাজ করে (image, script, frame, iframe), এবং window অবজেক্ট।
ব্রাউজারের ইমেজ ক্যাশের উপর নির্ভর করে অনেক ব্রাউজারে load ইভেন্ট ট্রিগার নাও হতে পারে (Firefox এবং IE)।
টিপস: জেকুয়েরি অ্যাজাক্স এ একটি load() মেথড রয়েছে। প্যারামিটার দেখে বুঝা যায় কোনটিকে কল করা হয়েছে।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).load(function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে load() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | আবশ্যক। নির্দিষ্ট এলিমেন্ট সম্পুর্ন লোড হলে যে ফাংশনটি রান হবে সেটিকে নির্দেশ করে। |
load() মেথড সংক্রান্ত উদাহরণ
ইমেজ সম্পুর্ন লোড হলে একটি টেক্সট এলার্ট দেখাবে তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").load(function(){
alert("ইমেজ লোড সম্পন্ন হয়েছে।");
});
});
</script>
</head>
<body>
<img src="../jquery_examples/satt_bangla1.jpg" alt="village photo" width="304" height="236">
<p><b>নোট:</b> বিভিন্ন ব্রাউজারের হয়তো load ইভেন্ট হয়তো কাজ নাও করতে পারে, কারন ব্রাউজার ইমেজ ক্যাশ(cache) করে রাখতে পারে।</p>
</body>
</html>
ফলাফল
ইমেজ সম্পুর্ন লোড হলে টেক্সট দেখানো
একটি ইমেজ সম্পুর্ন লোড হলে কিভাবে <div> এলিমেন্টের টেক্সট পরিবর্তন হবে তা নিচের উদাহরনে দেখান হলো।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").load(function(){
$("div").text("Image loaded");
});
});
</script>
</head>
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQH4XmSlpC3PdNIAJa21vMJhupTTqxTpPxEvmUUM8mcCqhCvnY2jC93T0" alt="satt img" width="304" height="236">
<div>ইমেজ লোড হচ্ছে।</div>
<p><b>নোট:</b>ইমেজটি cached হলে লোড ইভেন্ট ট্রিগার করবে কিনা তা ব্রাউজারের উপর নির্ভর করবে।</p>
</body>
</html>
ফলাফল
পেজ সম্পুর্ন লোড হলে টেক্সট এলার্ট দেখাবে
ইমেজসহ window অবজেক্ট সম্পুর্ন লোড হলে একটি টেক্সট এলার্ট দেখাবে।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).load(function(){
alert("পেজ লোড সম্পন্ন হয়েছে।");
});
});
</script>
</head>
<body>
<img src="../jquery_examples/satt_bangla1.jpg" alt="village photo" width="304" height="236">
<p><b>নোট:</b> বিভিন্ন ব্রাউজারে হয়তো load ইভেন্টটি কাজ করবে না, কেননা ব্রাউজার এটিকে ক্যাশ হিসেবে ধরে রাখতে পারে।</p>
</body>
</html>
ফলাফল