I discovered a handy script that displays a waiting message when my form is submitted. I implemented jquery-ui to showcase this message in a dialog box, and it was successful. However, upon customizing the text and adding an animated gif background using CSS, the image fails to appear consistently.
It's worth noting that inputting the code directly into the developer console yields the desired result.
$("#loading_dialog").loading();
The following code snippet triggers my dialog box without displaying the image.
jQuery('form').submit(function(event) {
$("#loading_dialog").loading();
});
CSS:
.ui-dialog .ui-dialog-content.ui-dialog-loadingDialog{
background: url("../img/loader.gif") no-repeat scroll 5px 15px transparent;
padding: 30px 0 0px 70px;
border: 2px solid #DDDDDD;
font-weight: 900;
line-height: 1em;
font-size: 1.0em;
color: #737373;
}
Edit:
I implemented a script I stumbled upon here: http://jsfiddle.net/artistan/nx3ce/
Despite having a very large page, this issue has become quite minor.