...

View Full Version : onload in pictures



Just-
02-05-2007, 10:58 AM
hi guys

i want to do something simple

get a time before like now
load a picture
get the time after the picture is loaded
load another picture
get the time after 2nd picture is loaded


can some one help me do this

i understand i cant just stick the code in between images
because javascript is just going to execute
so i tried to put in the onload mechanism when the picture is loaded run a function to get the time like this


<script type="text/javascript" >
<!--
var dd = new Date();
var t1 = dd.getTime();
-->
</script>

<img src="1Mb.jpeg" alt="test" width="200" height="100" align="middle" onload="getT2()" />

<script language="JavaScript" type="text/javascript">
<!--

function getT2()
{
var t2 = (new Date()).getTime();
}
// -->
</script>

<br>still loading hold on ....

<img src="1Mb.jpeg" alt="test" width="200" height="100" align="middle" onclick="getT3()" />

<script language="JavaScript" type="text/javascript">
<!--
function getT3()
{
var t3 = (new Date()).getTime();
}
// -->
</script>

now how do i manipulate t1 t2 and t3 after the 2 pics have loaded

if i enter like write.document(t1); all the picture will disappear and the screen is left with just the number

so how do i in the bottom of all this script can type like

var m1 = (t2 - t1);
var m2 = (t3 - t2);

document.write(m1);
document.write(m2);

if i type this in the bottom it will execute before the pictures are loaded
and it wont return anything, please some one help

chump2877
02-05-2007, 12:23 PM
i want to do something simple

get a time before like now
load a picture
get the time after the picture is loaded
load another picture
get the time after 2nd picture is loadedCan I ask why you are doing this?

Also, why do you need the load time of each picture? Why not just get the load time after everything in the page has loaded? Isn;t that usually what's relevant to the user?

The onclick event fires after everything is loaded in the page, so I suppose you could store the current time in a global JS variable, and then store the time again in the onload event....then find the difference in the times to get the load time for the entire page...never tried this, but the logic seems right to me...

chump2877
02-05-2007, 01:43 PM
Well I was curious how it could be done, so I think I have something that works HERE (http://www.mediamogulsweb.com/client/loadTime.html). Check out the source code. 'transparent.gif' is a 1px x 1px GIF image that only serves as a placeholder for images (so you don;t see the red X's in IE)...

Still wondering why you need load times of individual pictures though...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
<!--

var d1 = new Date();
var time1 = d1.getTime();
var imgArr = new Array('WMG_concept.jpg','Footnotes.jpg','webmail_pic.jpg','Guns.jpg');
var imgNum = 0;

function getImage()
{
document.getElementById('img'+imgNum).src = 'http://www.mediamogulsweb.com/'+imgArr[imgNum];
}

function getLoadTime(id)
{
if (document.getElementById(id).src == 'http://www.mediamogulsweb.com/transparent.gif')
return false;
var d2 = new Date();
var time2 = d2.getTime();
var loadTime = (time2 - time1) / 1000;
alert(imgArr[imgNum]+' took '+loadTime+' seconds to load.');
time1 = time2;
imgNum++;
if (imgNum < imgArr.length)
getImage();
}

-->
</script>

</head>

<body onload="getImage()">

<img onload="getLoadTime('img0')" id="img0" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img1')" id="img1" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img2')" id="img2" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img3')" id="img3" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />

</body>

</html>

Just-
02-05-2007, 04:38 PM
i need the time it takes to load pic1 and the time it takes to load picture too

with the time in sec and the size of the pic
i can calculate the speed
throughput

i got a speed test working with text
i am doing one now with pictures

chump2877
02-05-2007, 05:41 PM
So did you try using my code? Or do you not understand it?

scrupul0us
02-05-2007, 06:18 PM
can be done easily in php

lemme know if u want that kind of solution

Just-
02-06-2007, 01:57 PM
yeah php would be great

chump2877 let me have a more close look at your code

Just-
02-06-2007, 02:05 PM
chump2877 i sort of understand ur script

but if i change ur alert line to document.write()
it ****s up
document.write(imgArr[imgNum]+' took '+loadTime+' seconds to load.');

how can u do a website like yours
but in the end prints a bit of text saying

the 1st picture took x second then 2nd pic took X secounds
how do u do that ?

chump2877
02-06-2007, 06:32 PM
First of all, this is how you get the load time of a page using PHP: http://www.totallyphp.co.uk/code/page_load_time.htm. You could try using similar code to get the load time of each image, but I've never tried it, so I don;t know if it would work. Seems like it might...If you try it this way, let me know if it works for you.

As far as using my script to print the load times instead of alerting them (I've updated the script HERE (http://www.mediamogulsweb.com/client/loadTime.html)as well):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
<!--

var d1 = new Date();
var time1 = d1.getTime();
var imgArr = new Array('WMG_concept.jpg','Footnotes.jpg','webmail_pic.jpg','Guns.jpg');
var imgNum = 0;
var output = "";

function getImage()
{
document.getElementById('img'+imgNum).src = 'http://www.mediamogulsweb.com/'+imgArr[imgNum];
}

function getLoadTime(id)
{
if (document.getElementById(id).src == 'http://www.mediamogulsweb.com/transparent.gif')
return false;
var d2 = new Date();
var time2 = d2.getTime();
var loadTime = (time2 - time1) / 1000;
// alert(imgArr[imgNum]+' took '+loadTime+' seconds to load.');
output += '<p>'+imgArr[imgNum]+' took '+loadTime+' seconds to load.</p>';
time1 = time2;
imgNum++;
if (imgNum < imgArr.length)
getImage();
else
document.getElementById('display').innerHTML = output;
}

-->
</script>

</head>

<body onload="getImage()">

<img onload="getLoadTime('img0')" id="img0" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img1')" id="img1" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img2')" id="img2" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img3')" id="img3" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />

<div id="display"></div>

</body>

</html>

Just-
02-06-2007, 08:10 PM
i am trying to do a speed test website

with php it wont work :(

chump2877
02-06-2007, 09:00 PM
I looked at my code again and noticed a slight flaw in my logic...I was recording the initial time before the page finished loading, so this made the first image load time a little too long. Fixed it here:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
<!--

var d1;
var time1;
var imgArr = new Array('WMG_concept.jpg','Footnotes.jpg','webmail_pic.jpg','Guns.jpg');
var imgNum = 0;
var output = "";

function getImage(num)
{
if (num == 1)
{
d1 = new Date();
time1 = d1.getTime();
}
document.getElementById('img'+imgNum).src = 'http://www.mediamogulsweb.com/'+imgArr[imgNum];
}

function getLoadTime(id)
{
if (document.getElementById(id).src == 'http://www.mediamogulsweb.com/transparent.gif')
return false;
var d2 = new Date();
var time2 = d2.getTime();
var loadTime = (time2 - time1) / 1000;
// alert(imgArr[imgNum]+' took '+loadTime+' seconds to load.');
output += '<p>'+imgArr[imgNum]+' took '+loadTime+' seconds to load.</p>';
time1 = time2;
imgNum++;
if (imgNum < imgArr.length)
getImage(2);
else
document.getElementById('display').innerHTML = output;
}

-->
</script>

</head>

<body onload="getImage(1)">

<img onload="getLoadTime('img0')" id="img0" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img1')" id="img1" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img2')" id="img2" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img3')" id="img3" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />

<div id="display"></div>

</body>

</html>

Just-
02-07-2007, 10:31 AM
this is my code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE WML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <title>Testmymobile.net - Speed Test</title></head>
<body> <center>
<img src="tmm.jpg" width="15"></img><a href="index.html"><font size="+1" color="#000099">TestMyMobile.Net</font></a><br>
<br>Speed test in progress please hold ....

<script language="JavaScript" type="text/javascript">
<!--
var dd = new Date();
var t1 = dd.getTime();
-->
</script>

<!--
//LOAD PICTURE ONE !!!!!!!!!!!!
-->

<script language="JavaScript" type="text/javascript">
<!--
var t2 = (new Date()).getTime();
// -->
</script>

<br>still loading hold on ....
<!--
// LOAD PICTURE 2 !!!!!!!!!!!!
-->

<script language="JavaScript" type="text/javascript">
<!--
var t3 = (new Date()).getTime();
// -->
</script>

<script language="JavaScript" type="text/javascript">
<!--

var m1 = (t2 - t1);
var m2 = (t3 - t2);

if (m1 <= 5000 || m2 <= 5000)
{
function redirect()
{
location.replace('speedtestcalculator.html?&filesize=256&m1='+m1+'&m2='+m2+'&tooquick=true');
}
redirect();
}
else
{
location.replace('speedtestcalculator.html?&filesize=256&m1='+m1+'&m2='+m2);
}

-->
</script>

</body>
</html>

the problem i have with your code is that it does not store the times in unique variables like mine does

i want the page to load two pictures

time the time it takes to LOAD THE PICTURE

and then redirect to another website with the times of the pictures appended on the url
like this location.replace('speedtestcalculator.html?&filesize=256&m1='+m1+'&m2='+m2);
m1 and m2 being the times it took to download pic1 and pic2

now with ur code it never stores the time in a unique variable
thanks for helping me out

Just-
02-07-2007, 10:40 AM
try to add this to your code

if ( id == 'img0'){
var loadtime1 = loadTime;}
else if ( id == 'img1'){
var loadtime12= loadTime;}
else if ( id == 'img2'){
var loadtime13= loadTime;}
else ( id == 'img3'){
var loadtime4= loadTime;
document.getElementById('display').innerHTML = loadtime1 + loadtime2 + loadtime3 + loadtime4;
}

and it wont load
whats wrong with my code ?

chump2877
02-07-2007, 11:54 PM
i want the page to load two pictures

time the time it takes to LOAD THE PICTURE

and then redirect to another website with the times of the pictures appended on the url
like this location.replace('speedtestcalculator.html?&filesize=256&m1='+m1+'&m2='+m2);
m1 and m2 being the times it took to download pic1 and pic2

Try this (code is untested):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
<!--

var d1;
var time1;
var imgArr = new Array('WMG_concept.jpg','Footnotes.jpg','webmail_pic.jpg','Guns.jpg');
var imgNum = 0;
var queryStr = "";

function getImage(num)
{
if (num == 1)
{
d1 = new Date();
time1 = d1.getTime();
}
document.getElementById('img'+imgNum).src = 'http://www.mediamogulsweb.com/'+imgArr[imgNum];
}

function getLoadTime(id)
{
if (document.getElementById(id).src == 'http://www.mediamogulsweb.com/transparent.gif')
return false;
var d2 = new Date();
var time2 = d2.getTime();
var loadTime = (time2 - time1) / 1000;
if (imgNum > 0)
queryStr += '&'+encodeURI(imgArr[imgNum])+'='+loadTime;
else
queryStr += encodeURI(imgArr[imgNum])+'='+loadTime;
time1 = time2;
imgNum++;
if (imgNum < imgArr.length)
getImage(2);
else
location.replace('speedtestcalculator.html?'+queryStr);
}

-->
</script>

</head>

<body onload="getImage(1)">

<img onload="getLoadTime('img0')" id="img0" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img1')" id="img1" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img2')" id="img2" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />
<img onload="getLoadTime('img3')" id="img3" src="http://www.mediamogulsweb.com/transparent.gif" alt="" />
<br />

<div id="display"></div>

</body>

</html>

Just-
02-09-2007, 04:03 PM
thanks dude i managed to get it working this way

thanks a lot :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum