Solved

page load time

Posted on 2011-03-15
8
339 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
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Link failure 16 66
AJAX Wordpress Not Reading Variable 2 57
Date comparison to same 'wednesday' of previous year 3 29
php output utf-8 problem 6 23
Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

749 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