Solved

page load time

Posted on 2011-03-15
8
340 Views
Last Modified: 2012-05-11
Hi,

I have an image gallery and I want to display the time it took all of the photos to load after they are done loading.
0
Comment
Question by:Computer Guy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 39

Expert Comment

by:Aaron Tomosky
ID: 35138082
Firefox + Yslow + firebug
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35138092
On the page to the user not browser
0
 
LVL 34

Expert Comment

by:Beverley Portlock
ID: 35138665
Look at http://www.php.net/microtime

There are examples in the code of how to use that to time a script, but put one line at the start after the <?php tag and another near the end and simply subtract, then echo the result onto the screen.

0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 3

Expert Comment

by:sbickerstaff
ID: 35138671
You could probably start a javascript counter and output it to a field, but I'm not sure how you would stop this when the last image is loaded i.e. if the functionality is there in the browser to trigger an event when all images have been downloaded.
0
 
LVL 34

Expert Comment

by:Beverley Portlock
ID: 35138683
From the page linked to above...

<?php
$time_start = microtime(true);

// Sleep for a while
usleep(100);

$time_end = microtime(true);
$time = $time_end - $time_start;

echo "Did nothing in $time seconds\n";
?>

Open in new window

0
 
LVL 34

Accepted Solution

by:
Beverley Portlock earned 500 total points
ID: 35138717
Ahh.. just noticed, it's the photos you're timing, not the script. In that case it'll be javascript, not PHP. Sorry......
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35140431
Do you have a Javascript solution?
0
 
LVL 34

Expert Comment

by:Beverley Portlock
ID: 35146602
"Do you have a Javascript solution?"

No. I'm reasnably good at javascript but PHP is my main area of expertise. Having said that it seems to me that the real problem is the customer's machine and the ADSL (or whatever) line used to view the website. The PHP script will simply add <img../> tags in a fraction of a second and it is the process of downloading them to the client machine that takes all the time, so where you say "On the page to the user not browser" you need to measure the whole page download.

Now there are three ways of doing things in Javascript at preset times

1. Put javascript in the <head> section. This will run BEFORE the page shows up to the user

2. Put javascript at the end of the <body> section. This runs as soon as the HTML is downloaded, but pictures etc may still be downloading

3. Put javascript in a function and trigger using the  onLoad event. This should not trigger until everything has loaded.


So, we can try something like this (UNTESTED)

<head>
   <script>
      var startTime = new Date().getMilliseconds();
      var actualTime = 0;
      var endTime = 0;

      function timeLoad() {
            endTime = new Date.getMillseconds();
            actualTime = (endTime - startTime ) / 1000;
            alert( "It took " + actualTime + " seconds" );
      }
   </script>
</head>
<body onLoad='timeLoad()' >
   ...
   ...
   etc


As I said, javascript is not my strongest area so I may be a bit off with this
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question