Currently working in Android with Phonegap / Cordova, I am faced with the challenge of optimizing page loading time due to numerous DOM objects being created. To address this issue, I am attempting to implement a "Loading..." screen to prevent users from being greeted by a blank screen. However, my attempts at using CSS for this purpose have been unsuccessful thus far.
In an effort to create the loading animation, I have referred to the following script:
http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
Placing the provided code snippet at the bottom of my HTML page, I then incorporated the corresponding CSS rules into my stylesheet as follows:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, .8)
url('../img/loader.gif')
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
To trigger the loading state, I included the following code snippet at the beginning of my application's JavaScript file:
$("body").on({
ajaxStart: function() {
$(this).addClass("loading");
},
ajaxStop: function() {
$(this).removeClass("loading");
}
});
Despite implementing the suggested approach, I continue to encounter issues where the desired CSS layer and GIF animation fail to render, leaving me with the standard black screen during DOM object population. This has prompted me to question the compatibility of this type of loading screen within the Phonegap framework.
If anyone could offer assistance or insights on this matter, it would be greatly appreciated. Thank you.
* Additionally, upon further examination, I discovered that the JQuery library version used in the reference example is 1.7.2, whereas I am utilizing the latest version 2.0.3. The discrepancy in library versions appears to impact the functionality of the example when tested in jsfiddle, leading me to suspect potential deprecations in the code.