Random Web Tools » loading http://www.randomtools.net Advice and tools from a young web developer Mon, 16 Aug 2010 06:16:11 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 How To: Create a Simple Visual “Loading” Effect http://www.randomtools.net/how-to-create-a-simple-visual-loading-effect-12.html http://www.randomtools.net/how-to-create-a-simple-visual-loading-effect-12.html#comments Fri, 18 Jul 2008 04:24:14 +0000 Dan http://www.randomtools.net/how-to-create-a-simple-visual-loading-effect-12.html If you've got a script that takes a while to load and want to make your user aware that everything is alright, then this tool is for you. The idea is simple – display the message before the labor intensive part of the script runs, and then using CSS after the labor intensive part of the script, hide the message. If you're using a language that provides a buffer (ASP for instance), make sure you turn the buffer off first, or this won't have any effect. (eg. Response.Buffer = False) Example (See it in action):

<?php
ini_set('implicit_flush', 'on');

echo '<p id="loading_msg"><img src="http://img520.imageshack.us/img520/4950/loadingvp7.gif" alt="" style="vertical-align: middle;" /> Loading...</p>';

// Code that takes forever here, could of course be any language
sleep(5); // Only for demonstration

echo '<script type="text/javascript">
window.onload = init;

function init() {
	document.getElementById("loading_msg").style.display = "none";
}
</script>';
echo '<p>Woohoo, five seconds passed.</p>';

require_once('includes/trackers.inc.php');
?>
Bookmark this page
[del.icio.us] [Digg] [Facebook] [Google] [Reddit] [Slashdot] [StumbleUpon]
]]> http://www.randomtools.net/how-to-create-a-simple-visual-loading-effect-12.html/feed 0