progress-animation while waiting for positive file-exists-check with jquery-ajax

Temple in Saitama (Japan), by Christoph Burmeister (own photo)

Temple in Saitama (Japan), by Christoph Burmeister (own photo)

Puh, long title, but actually very simple. Imagine you have a web-project that does some processing-intensive operations and you don’t want your users to watch the stupid browser-loading-icon. Instead you want to place a progress-loader to your site. In this case we wait for existence of a special file called „a.txt“ in the root-directory. So the loading-image will disappear if the file is created (or copied or called by the force).

The following projects contains four important files:

  • index.html : the canvas
  • default.css : the styling for the loader-area
  • ajax-check-for-file-script.js : the lib that contains our js-functions
  • ajax-loader.gif : the loader-image that will be pushed to loader-area while … loading 🙂

The body starts the showLoader()-function while its onloading. In the js-script we use the native js-function „setInterval()“ for an ajax’ed function that will be called every 1000msec. As long as the GET-operation to „./a.txt“ returns an HTTP-404 (not found) the showLoader()-function is called. If the GET-operation returns a HTTP-200 (success) – the file was found – the hideLoader()-function is called.

./index.html

<html>
	<head>
		<meta charset="UTF-8">
		<!-- css-imports -->
		<link rel="stylesheet" href="./styles/default.css" type="text/css" />
		<!-- javascript-imports -->
		<script type="text/javascript" src="./scripts/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="./scripts/ajax-check-for-file-script.js" /></script>
	</head>

	<body onload="showLoader()">
		
	</body>
</html>

./styles/default.css

/* center it */
#loaderDiv {
	position:absolute; 
	top: 50%;
	left: 50%;
	
	margin-left: -100px; /* 0.5 x width */
	margin-top: -10px; /* 0.5 x height */
	
	width:200px;
	height:20px;
}

./scripts/ajax-check-for-file-script.js

var ajaxRequestIntervalMs = 1000;
var ajaxRequestUrl = './a.txt';
var loaderImageUrl = './img/ajax-loader.gif';
var loaderDivName = 'loaderDiv';

// http://www.w3schools.com/js/js_obj_boolean.asp
var isLoading=new Boolean(); 
isLoading=false;

//JavaScript's built-in setInterval() function
setInterval(
	function(){			             
		$.ajax({
			url: ajaxRequestUrl,
			type: "GET",
			cache: false,                                  
			statusCode: {
				// HTTP-Code "Page not found"
				404: function() {
					if (isLoading===false){
						showLoader();
					}
				},
				// HTTP-Code "Success"
				200: function() {
					if (isLoading===true){
						hideLoader();
					}
				}    
			}
		});		
	},
	ajaxRequestIntervalMs
);

// ------------ show- and hide-functions for the overlay -----------------
function showLoader(){
	$("body").append("<div id='" + loaderDivName + "'><img src='"+loaderImageUrl+"' /></div>");
	isLoading=true;
};
 
function hideLoader(){
	$("#" + loaderDivName).remove();
	isLoading=false;
};

./img/ajax-loader.gif

ajax-loader
taken from http://www.ajaxload.info/