In order to get a better idea of how to implement these types of solutions, we will create an animated transition that will wrap itself around a very slow PHP script. Thus, we will try to influence the perceived speed of the original script.
Our original PHP script will simulate slow execution by running a sleep command. Here is the content of the original script:
<?php
// chap10_slow_before.php
sleep(5);
echo 'The original page loads very slowly...';
If we run this script immediately, we definitely perceive that the script is slow and that the elapsed time could make us believe that something is going wrong:
The script truly gives us the impression that it is momentarily hanging.
We will now create an HTML script that will query the original PHP script and obtain the script's output through an AJAX request. This new HTML script will also add some transition animations in order to influence the user's perception of the original script's speed.
In order to accomplish this, we will add a throbber that is entirely generated by CSS and we will use the jQuery and Modernizr libraries to do the AJAX call. These library files are hosted on CDNs in order to benefit from HTTP Reverse Proxy caching and browser caching. Here is the content of the second script (chap10_slow_after.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slow page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#se-pre-con {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#contents {
display: none;
text-align: left;
}
</style>
</head>
<body onload="myAnimatedAjax()" style="margin:0;">
<div id="se-pre-con"></div>
<div id="contents"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">
jQuery.ajaxSetup({
beforeSend: function() {
$("#contents").html("Loading page... One moment please...").toggle();
},
complete: function(){
$("#se-pre-con").fadeOut("slow"); //toggle visibility: off
},
success: function(result) {
$("#contents").html(result);
}
});
function myAnimatedAjax() {
var myVar = setTimeout(animatedAjax, 500);
}
function animatedAjax() {
$.ajax({
type: "GET",
url: "/chap10_slow_before.php"
});
}
</script>
</body>
</html>
When running this new script, you should see a throbber appear:
The throbber informs the user that something is happening.
And then, a few moments later, you will see a message stating that the desired page is being loaded:
This new message aims to distract the user and causes the user's perception of time to be partially reset. Finally, when the AJAX request is completed, the throbber and the message both disappear in order to display the other page's content:
When letting the new script run, we definitely get the impression that the original script's wall time has decreased when, in fact, it has increased due to the 0.5 second timeout that was added to the JavaScript function that is making the AJAX request. If you run the JavaScript profiler that we mentioned in previous chapters on this new script, you will get to see what is happening behind the scenes:
The profiler confirms that most of this script's wall time is explained by the network I/O to the original script that takes as much time as before to load. But what we have achieved with the new wrapper script is giving the impression to the end user that we have succeeded in going "beyond performance."