Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render.
The button serves as a form submission. Upon being clicked, a class of "clicked" is dynamically added to it through JavaScript. The CSS style dictates that when the button has the class "clicked," it should show a loading animation as its background image. However, this animation often appears delayed (about 0.5-1.0s after clicking), sometimes not even appearing before the page reloads following a submit. Even when pausing the JavaScript execution after adding the class and inspecting the DOM using developer tools, the class is already present but the image fails to display in most cases.
To replicate this issue, here's a fiddle demonstrating the behavior: http://codepen.io/rjk/pen/rGntD
This problem seems to be specific to the Chrome browser, as Firefox shows everything instantly as expected.
If anyone has insight into how to prompt Chrome to immediately reflect the change and eliminate this unpredictability, your input would be greatly appreciated.
A simplified version of the JavaScript code causing this issue is as follows:
function loadingClickHandle(button, style) {
jQuery(button).addClass(style + "-clicked");
}
loadingClickHandle(this, "button-blue");
$("form:first").submit();