Javascript Load Events

The previous lesson of javascript lessons series was about accessing html elements in javascript and in this lesson we will learn about javascript load events.

Javascript Window Load Event:

Javascript load events are triggered when the element to which the load event is attached has loaded in browser window. We can attach load event to the browser window or an image. Let us write an example code of attaching load event to browser window and show an alert box when the browser window loads. There are several ways to do this and a few of those methods are given below:

<script type="text/javascript">
window.onload = myFunc;

function myFunc(){
 alert('yes');
}
</script>

<script type="text/javascript">
window.onload = function() {
  alert('yes');
};
</script>

<script type="text/javascript">
function myFunc(){
 alert('yes');
}

window.addEventListener('load', myFunc, false);
</script>

Javascript Image Load Event:

Just like we attached the load event to the browser window, we can also trigger an event when an image loads in the browser. An example of alert message on image load in browser is given below:

<script type="text/javascript">
var img = document.getElementById('img1');
img.onload = myFunc;

function myFunc(){
 alert('Image Loaded!');
}
</script>

<script type="text/javascript">
var img = document.getElementById('img1');
img.onload = function() {
  alert('yes');
};
</script>

<script type="text/javascript">
var img = document.getElementById('img1');

function myFunc(){
 alert('yes');
}

window.addEventListener('load', myFunc, false);
</script>

Javascript Image Error Load Event:

We can also trigger a javascript event if an image fails to load in the browser i.e

<script type="text/javascript">
var img = document.getElementById('img1');
img.onerror = myFunc;

function myFunc(){
 alert('Error: Image not loaded');
} 
</script>

<script type="text/javascript">
var img = document.getElementById('img1');
img.onerror = function() {
  alert('Error: Image not loaded');
};
</script>

<script type="text/javascript">
var img = document.getElementById('img1');
function myFunc(){
 alert('Error: Image not loaded');
}
img.addEventListener('error', myFunc, false);
</script>

Javascript Window Resize Event:

Window Resize is another javascript event which is triggered when the user resizes the browser window i.e

<script type="text/javascript">
window.onresize = function() {
  alert('Browser Window Resized');
};
</script>

<script type="text/javascript">
window.onresize = myFunc;

function myFunc(){
 alert('Browser Window Resized');
} 
</script>

<script type="text/javascript">
function myFunc(){
 alert('Browser Window Resized');
}
window.addEventListener('resize', myFunc, false);
</script>

Javascript Before Browser Unload Event:

Javascript onbeforeunload event is triggered when a user tries to close the browser window and before the browser windows closes, we can alert something to the user or show a confirm box to the user to confirm the browser closing action. An example code is given below:

<script type="text/javascript">
window.onbeforeunload = function() {
   return 'Close Browser Window';
};
</script>

For more lessons on Javascript subscribe on InformationBitz.com