Utilizing the Ajax Loading image referenced at this link to display a loading image during various stages of an ajax request (begin, complete, success).
I'm interested in learning how to position the image above all content and center it on the screen, similar to loading images commonly seen on websites.
<div id="ajaxloader" style="display: none;">
<h:graphicImage value="/resources/img/gload.gif"></h:graphicImage>
</div>
Ajax script
<script>
jsf.ajax.addOnEvent(function(data) {
var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
var ajaxloader = document.getElementById("ajaxloader");
switch (ajaxstatus) {
case "begin": // This is called right before ajax request is sent.
ajaxloader.style.display = 'block';
break;
case "complete": // This is called after ajax response is received.
ajaxloader.style.display = 'none';
break;
case "success": // This is called when ajax response is successfully processed.
// NOOP.
break;
}
});
</script>