লোড এবং আন-লোড ইভেন্ট (Load and Unload Event)

লোড এবং আন-লোড ইভেন্ট (Load and Unload Event) :

লোড (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 করব।

$('#image1')
    .load(function(){
        $('#result1').text('Image is loaded!');    
    })
    .error(function(){
        $('#result1').text('Image is not loaded!');
    });

যদি image টি ঠিক ভাবে load হয় তবে load() function টি call হবে, অন্যথায় error() function টি call হবে।

<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>

Demo :

Unload Example :

<!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>

Try Demo

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।