Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onload in pictures

    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

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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 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...
    Last edited by chump2877; 02-05-2007 at 12:48 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Well I was curious how it could be done, so I think I have something that works HERE. 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...

    Code:
    <!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>
    Last edited by chump2877; 02-05-2007 at 01:53 PM. Reason: Added source code
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    So did you try using my code? Or do you not understand it?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    can be done easily in php

    lemme know if u want that kind of solution

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah php would be great

    chump2877 let me have a more close look at your code

  • #8
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ?

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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 as well):

    Code:
    <!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>
    Last edited by chump2877; 02-06-2007 at 06:42 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i am trying to do a speed test website

    with php it wont work

  • #11
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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:

    Code:
    <!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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is my code
    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

  • #13
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ?

  • #14
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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):

    Code:
    <!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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #15
    New Coder
    Join Date
    Jan 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks dude i managed to get it working this way

    thanks a lot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •