লোড এবং আন-লোড ইভেন্ট (Load and Unload Event) : জে-কোয়েরী -(পর্ব-৩৮)

1 Comment / জে-কোয়েরী (jQuery) / By

লোড (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>

</body>
</html>
[/sourcecode]

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>

</body>
</html>
[/sourcecode]

Try Demo

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

1 thought on “লোড এবং আন-লোড ইভেন্ট (Load and Unload Event) : জে-কোয়েরী -(পর্ব-৩৮)”

Leave a Comment