Anyone who has experimented with ThreeJS knows that even the minified script is massive, 408KB to be precise (r66).
For a responsive site such as Cell, where we are expecting mobile users to be coming to our site, and therefore slower and more patchy connections, it is even more important to keep the user informed of loading progress.
First of all, we load the script using an XHR request through a PHP file_get_contents() function and write this to a string.
Secondly, we use PHP’s strlen() function to get a rough size in bytes of the file to be downloaded. The following line then returns the size as a comment at the start of the file:
echo "// $s $f";
From then onwards we can use these values to calculate the percentage loaded and pass that into a <progress> element to provide the user feedback that we needed.
There was however, a major problem with this preloader. Because the file is being loaded through the PHP script, it doesn’t cache like a normal script would. This actually meant that if a user were to visit more than one environment page they would have to download the file again, completely defeating the purpose of the preloader!
In hindsight, some kind of PHP cache may have been able to help with this issue, however I opted with completely removing the preloader script and allowing the browser to handle loading and caching natively.