WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Display Page Load Time

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Display Page Load Time Mon Mar 29, 2010 2:03 am

Guest


Guest

Display Page Load Time
Display page loading time with JavaScript and HTML


Hi Guest!

We are going to write a code which will show the page load time of a particular page. It contains JavaScript as well as HTML.

First of all, we get the current time by using Date() function and store its value in the variable 'ladestart'.

Code:
ladestart = new Date();


Then we initiate a function called 'ladezeit' in which we get the value of current time again and store its value in variable 'current'.

Code:
function ladezeit()
{
 current = new Date();
  ....
}

Now, we need to get the time in seconds. For that we'll use the getTime() function which will calculate time in milliseconds. We find out the difference between time before and after execution of the function 'ladezeit'. The time difference is stored in the variable 'dtime'.

Code:
 dtime = current.getTime() - ladestart.getTime();


The time difference we found is in milliseconds. To conver it into seconds we'll divide it by 1000.

Code:
 loadtime = dtime/1000;

Now, we have got the page load time. We just need to display it some where on the page. For that, we'll use the 'innerHTML' method. We'll display the page load time in a container have id='Ladezeit-Anzeige'.

Code:
 document.getElementById("Ladezeit-Anzeige").innerHTML = loadtime;


Now comes the HTML part. We have to make the function to be executed when the main body loads, so we'll add this to our <body> tag...

Code:
<body onload="ladezeit()">

And yes, we need to create a <div> with id 'Ladezeit-Anzeige' where the page load time will be displayed.

Code:
<div id="Ladezeit-Anzeige" style="position: absolute;  top: 8px; left: 150px;"></div>


Its done Very Happy


Here is the full code...

Code:
<!--BEGIN_loadtime-->
<script type="text/javascript">

ladestart = new Date();

function ladezeit()
{
 current = new Date();
 dtime = current.getTime() - ladestart.getTime();
 loadtime = dtime/1000 +" Page load time";
 document.getElementById("Ladezeit-Anzeige").innerHTML = loadtime;
}

</script>
<body onload="ladezeit()">
<div id="Ladezeit-Anzeige" style="position: absolute;  top: 8px; left: 150px;"></div>
<!--END_loadtime-->

Display Page Load Time 20tm077

Updated By ankillien

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

2Accespted Re: Display Page Load Time Tue Mar 30, 2010 12:08 am

ankillien

ankillien
Administrator
Administrator
Hi crysis!

Thanks for your contribution buddy Very Happy
This tutorial can be more helpful if you explain how the code works so that the members can understand and modify it themselves.

Just giving a copy-paste code won't be so helpful as to explain how the code works Very Happy

Thanks.

3Accespted Re: Display Page Load Time Tue Mar 30, 2010 12:43 am

Guest


Guest
Eh there is not much to explain, because the code display only the page load time.

4Accespted Re: Display Page Load Time Tue Mar 30, 2010 4:17 am

Fred100

Fred100
Registered Member
Registered Member
He means Give info on how to use it ,
That's how tuts are supposed to be bud .
Anyone can say the same like
"here's the code , just copy and paste , you're done , now close the browser play games *hurrr* *woosh* Razz "
Just specify it a little bit so that other members don't have a hard time understanding it Wink

http://www.art-castle.biz/forum.htm

5Accespted Re: Display Page Load Time Tue Mar 30, 2010 9:09 am

ankillien

ankillien
Administrator
Administrator
crysis992 wrote:Eh there is not much to explain, because the code display only the page load time.

Fred said it right.
You should explain how it displays the page load time. People should understand how the code works so that they can learn something and also customize the code as per their needs.

If you find it difficult to explain, allow me to add some info to it.
We'll accept this tutorial after that.

6Accespted Re: Display Page Load Time Tue Mar 30, 2010 9:29 pm

Guest


Guest
Yes if you want explain the code, because i have no idea how i should explain it Embarassed

7Accespted Re: Display Page Load Time Sun May 02, 2010 10:37 pm

ankillien

ankillien
Administrator
Administrator
Tutorial updated and explanation added.

Accepted and Moved

8Accespted Re: Display Page Load Time Fri May 07, 2010 9:49 pm

Joel

Joel
Registered Member
Registered Member
cool tutorial;)

http://www.advertisehotspot.info/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Display Page Load Time

Permissions in this forum:
You cannot reply to topics in this forum