I am designing a loading screen for my website that includes the loading of multiple images, scripts, and other elements. While the HTML and CSS part is working well, I need to ensure that the "loading..." image is loaded before anything else on the page.
Using jQuery, everything is initialized within $(function () { ... });. My idea is to call the code for loading the image before or outside of this block, and then remove the loading screen at the end of the block. Currently, the loading image is set as a DIV background, which is my preferred method. However, if necessary, I am open to using an IMG tag instead.
Update: (solution)
To address my question, I came up with a solution that combines inputs from Robin and Vlad. Both their responses were excellent in terms of loading one image before another, but not specifically before anything else like CSS or JS files.
Here's the modified version of what I implemented:
var files = [new Image(), document.createElement('link'), document.createElement('script')];
files[0].setAttribute('src', 'images/loading.gif');
files[1].setAttribute('rel', 'stylesheet');
files[1].setAttribute('type', 'text/css');
files[1].setAttribute('href', 'test.css');
files[2].setAttribute('type', 'text/javascript');
files[2].setAttribute('src', 'js/jquery-1.5.1.min.js');
window.onload = function (e) {
document.getElementsByTagName('head')[0].appendChild(files[1]);
document.getElementsByTagName('head')[0].appendChild(files[2]);
}
After observing the load sequence in the network tab of Chrome's developer console, it becomes evident that the 'loading.gif' is loaded first, followed by 4 dummy images, then 'test.css', and finally 'jquery.1.5.1.min.js'. The CSS and JS files are only loaded after being inserted into the head tag, precisely as desired.
However, I anticipate potential issues when loading a list of files. According to Chrome's report, there are instances where the JS file loads before the CSS file, while in the majority of cases, it is the other way around. This won't be problematic unless I begin adding files to load and need to ensure that jQuery is loaded prior to a script file dependent on jQuery.
If anyone has a solution or knows how to detect when CSS/JS files finish loading using this approach, please comment. Although I am not currently facing any problems, I may need assistance in the future if any arise with this method.
Many thanks to all who have assisted me with this matter.
Update: (glitch fix)
I encountered several issues with the previous method. The problem arose because the script files were being loaded asynchronously. When I cleared the browser cache and loaded the page, it would often complete the loading of my jquery-dependent files first. However, upon refreshing the page, it would work correctly due to the cached version of jquery being loaded. To address this, I created an array of files to load and placed the load script within a function. Then, I stepped through each item in the array using the following code:
element.onload = function() {
++i; _step();
}
element.onreadystatechange = function() {
if (("loaded" === element.readyState || "complete" === element.readyState)) { ++i; _step(); }
}