How can i make something similar like GMail has http://o7.no/H72gPf When application starting, gmail showing progress bar and it show us the percent (part) of loaded content already.
How i can mesure that certain JS file (HTML content, CSS or Images) loaded partially or fully ?
P.S. On server side I would like to use PHP
分享 You can do this in a number of ways.
An easy way is to place your script tags (for included scripts) below the content, and have each included script call some function defined in the HEAD section of your document.
So if you define this in a script tag in the head of your document:
function increment_progress() {
// your HTML-dependent implementation here
}
Then just do this at the bottom of included scripts:
increment_progress();
What increment_progress does really depends on what your progress-bar looks like, and how you build it with HTML.
For example you could have a TABLE in a DIV, adding a TD to the first TABLE row each call to increment_progress, with fixed TD widths and different background colours for TD and DIV. You then choose a width for TD's which roughly equals (width of DIV) / (number of scripts to be loaded).
Something like this:
<html>
<head>
<style type="text/css">
#your_interface { display: none; }
#progressbar { width: 100px; background: #00ff00; }
#progressbar table { width: 100%; margin: 0px; }
#progressbar table td { padding: 0px; border: 0px;
border-collapse: collapse;
background: #ff0000; width: 10px; }
</style>
<script type="text/javascript" href="/path/to/jquery"></script>
<script type="text/javascript">
var count = 0;
function increment_progress() {
$('#progressbar table tr').eq(0).append('<td> </td>');
count++;
if (count == 9) { // the number of scripts loaded below
$('#progressbar').hide();
$('#your_interface').show();
}
}
</script>
<head>
<body>
<div id="progressbar"><table><tr><td></td></tr></table></div>
<div id="your_interface">
The rest of your content here!
</div>
<script type="text/javascript" href="/path/to/script1"></script>
<script type="text/javascript" href="/path/to/script2"></script>
<script type="text/javascript" href="/path/to/script3"></script>
<script type="text/javascript" href="/path/to/script4"></script>
<script type="text/javascript" href="/path/to/script5"></script>
<script type="text/javascript" href="/path/to/script6"></script>
<script type="text/javascript" href="/path/to/script7"></script>
<script type="text/javascript" href="/path/to/script8"></script>
<script type="text/javascript" href="/path/to/script9"></script>
</body>
</html>
If you've got a fast server and fast internet connection, you'll barely see it :-)
If you're already loading scripts using AJAX, you could call increment_progress() from your 'response' handler function.
Update: to show how to transition to the real user interface after loading.
分享
