Galactic Civilizations 3
Launch JavaScript function after the loading of the page

Launch JavaScript function after the loading of the page

Category: Javascript.
Posted by on the 22/09/2013.
Last update on the 22/08/2013.

Description

This tutorial explains how to launch JavaScript function after the loading of the page. This tutorial explains how to do that with or without jQuery

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in HTML and JavaScript.

Without using jQuery

The page

First of all we will create a file called tutorielsenfolie.html.
This file will contain an empty page and will call the JavaScript script. This script will be executed after the loading of the page.

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" >
<head>
<title>Script executed after the loading of the page</title>
<!-- We call the script that will be executed after the loading of the page -->
<script language="javascript" src="loading.js" ></script> </link>
</head>
<body>

This page is empty.
</body>
</html>

The script

Now that our HTML page is created, we will write our test function and the code that will be executed after the loading of the page.

To do that, create a file and call it loading.js:

loading.js

if(window.addEventListener){
window.addEventListener('load', myTestFunction, false);
}else{
window.attachEvent('onload', myTestFunction);
}

function myTestFunction(){
//we display "I love tutoriels en folie"
alert("I love tutoriels en folie !");
}

The function « myTestFunction » will be executed when the page will be fully loaded.

With jQuery

In this section, I will explain you how use jQuery to launch a JavaScript script after the loading of the page.

The page

In order to use the jQuery functionality, we need to include it inside the HTML header<head> » tag).

To do that, we will add « <script language="javascript" src="http://code.jquery.com/jquery-latest.js"></script> » below the « title » tag:

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" >
<head>
<title>Script executed after the loading of the page</title> <script language="javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<!-- We call the script that will be executed after the loading of the page -->
<script language="javascript" src="loadingWithJQuery.js" ></script> </link>
</head>
<body>

This page is empty.
</body>
</html>

The script

The jQuery code that allows launching a JavaScript script after the loading of the page is very simple.

Create a file and call it loadingWithJQuery.js:

loadingWithJQuery.js

$(document).ready(myTestFunction());

function myTestFunction(){
//we display "I love tutoriels en folie"
alert("I love tutoriels en folie !");
}

You like this tutorial ?
Like this website in order to promote it on facebook !

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo