লোড (Load) ইভেন্ট : load() event টি ঘটে, যখন একটি নির্দিষ্ট উপাদান (এবং এর সাব উপাদান) লোড হয়। এই event টি URL-এর সাথে সম্পর্কযুক্ত যে কোনো উপাদান যেমন : images, scripts, frames, iframes, এবং window object ইত্যাদি প্রেরন করতে পারে। যদি image টি Browser এর ক্যাশে থাকে সে ক্ষেত্রে load event trigger নাও হতে পারে (Firefox and IE)।
আন-লোড (Unload) ইভেন্ট : যখন User কোন page close করে দেয়, তখন Unload event টি সংঘঠিত হয়। এছাড়াও বিভিন্ন কারনে Unload event সংঘঠিত হতে পারে। যেমন :
- একটি লিঙ্ক যা click করলে page টি ত্যগ করতে হবে (a link to leave the page is clicked)
- Address বারে একটি নতুন URL টাইপ করলে (a new URL is typed in the address bar)
- Forward অথবা Back Button use করলে (the forward or back buttons are used)
- Browser window close করে দিলে (the browser window is closed)
- Page reloaded করলে (the page is reloaded)
বি : দ্র: unload() method টি শুধু মাত্র window object এর সাথে ব্যবহার করা উচিত।
Load Example :
এখানে আমরা দেখব যে, একটি image Load হয়েছে কিনা তা কিভাবে jQuery এর মাধ্যমে check করা যায়। এক্ষেত্রে আমরা load() এর সাথে error() event টিও use করব।
[sourcecode language=”js”]
$(‘#image1’)
.load(function(){
$(‘#result1’).text(‘Image is loaded!’);
})
.error(function(){
$(‘#result1’).text(‘Image is not loaded!’);
});
[/sourcecode]
যদি image টি ঠিক ভাবে load হয় তবে load() function টি call হবে, অন্যথায় error() function টি call হবে।
[sourcecode language=”html”]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
span{
padding:8px;
border:1px solid red;
color:blue;
}
</style>
</head>
<body>
<h1>Check if image is loaded jQuery</h1>
<p>
<img id="image1"
src="http://www.tutorialbd.com/jquery/images/pic/tutohost.png"/>
<p>Load image from
"http://www.tutorialbd.com/jquery/images/pic/tutohost.png"</p>
<span id="result1"></span>
</p>
<p>
<img id="image2" src="abc.jpg"/>
<p>Load image from "abc.jpg"</p>
<span id="result2"></span>
</p>
<script type="text/javascript">
$(‘#image1’)
.load(function(){
$(‘#result1’).text(‘Image is loaded!’);
})
.error(function(){
$(‘#result1’).text(‘Image is not loaded!’);
});
$(‘#image2’)
.load(function(){
$(‘#result2’).text(‘Image is loaded!’);
})
.error(function(){
$(‘#result2’).text(‘Image is not loaded!’);
});
</script>
Try Demo
Unload Example :
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(window).unload(function(){
alert("Goodbye!");
});
});
</script>
</head>
<body>
<p>When you click <a href="http://www.tutohost.com/">this link</a>
, or close the window, an alert box will be triggered.</p>
Try Demo
………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”
জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ
- জে-কোয়েরী কি ?
- JavaScript, AJAX এবং jQuery নিয়ে কিছু কথা
- জে-কোয়েরী কোডিং পদ্ধতি
- জে-কোয়েরী সিনট্যাক্স
- জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন
- জে-কোয়েরী অবজেক্ট এ্যাস্কেসর
- জে-কোয়েরী সিলেক্টর সমূহ
- অল সিলেক্টর (All Selector)
- ক্লাস এবং আইডি সিলেক্টর
- ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর
- এট্রিবিউট সিলেক্টর
- প্রিফিস্ক সিলেক্টর
- কন্টেইন্ডস্ সিলেক্টর
- ওয়ার্ড এবং এন্ড সিলেক্টর
- ইকুয়াল এবং নট ইকুয়াল সিলেক্টর
- স্টার্ট ওয়িথ এবং হ্যাজ সিলেক্টর
- মাল্টিপাল এট্রিবিউট সিলেক্টর
- এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project
- :হিডেন সিলেক্টর
- :ভিজিবল সিলেক্টর
- jQuery form selectors উদাহরন
- Dynamically add/remove textbox
- জে-কোয়েরী ইভেন্ট সমূহ
- ব্লুয়ার ইভেন্ট
- ফোকাস এবং চেঞ্জ ইভেন্ট
- সাবমিট এবং সিলেক্ট ইভেন্ট
- ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট
- কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট
- কিভাবে copy, paste এবং cut behavior detect করা যায়?
- ক্লিক এবং ডাবল-ক্লিক ইভেন্ট
- মাউস্-মূভ ইভেন্ট
- মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য
- মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য
- টগল ইভেন্ট(Toggle Event)
- মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট
- jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন
- রিসাইজ ইভেন্ট (Resize Event)
- লোড এবং আন-লোড ইভেন্ট (Load and Unload Event)
very nice, it was very useful to me.