Jump to content

Preloader Progress bar Issue

remenissions

By remenissions
in Javascript Help

 Share

Recommended Posts

remenissions Member

remenissions

Posted
Posted

The problem I'm having is when I use getElementById() it works in google and ffox but with Ie it declares the object as null since the html hasn't been loaded yet. It works but in ie it will mess up the count aswell. Is there a way around this to do what I want? Like with a document.write or something

 

/* Check Loading Progress */
			function check_Load(images) { 
				/* -Loading complete :: Send to new header- */
					if (curImage == image_url.length) { 
							document.getElementById("process_Load").innerHTML = 100 + "%";
							//window.location.replace("/lobby.vanity.php");
						return;
					}
				/* -/Loading complete :: Send to new header- */

				/* -Update each load- */
					for(i=0; i <= image_url.length; i++) {
							preload_Image[i].onload = function() {
								progress_Percent += progress;
								//document.getElementById("process_Load").innerHTML = Math.round(progress_Percent) + "%";
								//document.getElementById("load_Bar").style.width = (Math.round(progress_Percent)*(4-10)) + "px";
								curImage++; 
								document.getElementById("debug").innerHTML = curImage;
							}
					}
				/* -/Update each load- */

				/* -Repeat this.function()- */
					var timer = setTimeout("check_Load()",10) 
				/* -/Repeat this.function()- */
			}
		/* /Check Loading Progress */

Link to comment
Share on other sites
remenissions Member

remenissions

Posted
  • Author
Posted 
I implemented it in and works great and eliminated those errors in ie, but for some reason in ie the script stops like 3 images short and because it does it doesn't allow the script to finish and replace location. I debugged it in fire fox and saw no errors. Works fine in google chrome as well. Just not sure why it won't work in ie. I'm on linux with my desktop so i've been messing around on my laptop trying to get it to work for the past 4 hours, not sure why it won't. Would anyone mind taking a look at it? I'm not sure if lets me post the whole page into this, It didn't for the last so here it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<?php 
		/* Retrieve Pictures */
			echo "<script type='text/javascript' >
					var image_url = new Array();";

			$dir_Array = array('/subVanity/VanityPics/', '/subVanity/VanityBackgrounds/');
			$ctr = 0;

				/* -Load images from server- */
					for($k=0; $k<count($dir_Array); $k++) {
						if ($handle = opendir($_SERVER["DOCUMENT_ROOT"].$dir_Array[$k])) {

							   while (false !== ($entry = readdir($handle))) {
				   			   if ($entry != "." && $entry != "..") {
				  						echo "image_url[$ctr] = '{$dir_Array[$k]}{$entry}';";
				  						$ctr++;
      		  					}
    							}
		  						closedir($handle);
						}
					}
				/* -/Load images from VanityPics- */	

				echo "</script>";
		/* Retrieve Pictures */
	?>

	<script type="text/javascript" >

	/* Preload Script */
	window.onload = function() {
		/* Detect Images && Create Them */
				if (document.images) {

					/* -Progress control- */
						var progress = 100/image_url.length;
						var curImage = 0;
						var progress_Percent = 0;
					/* -/Progress control- */

					/* -Create new image object && array- */
      					preload_Image = new Array();
      			 		for(i=0; i<=image_url.length; i++) {
      			 			preload_Image[i] = new Image();
      			   		preload_Image[i].src = image_url[i];
						}
					/* -/Create new image object && array- */

					/* -Call load check- */
						check_Load();
					/* -/Call load check- */

    				}
		/* /Detect Images && Create Them */

		/* Check Loading Progress */
			function check_Load() { 
				/* -Loading complete :: Send to new header- */
					if (curImage == image_url.length) { 
							document.getElementById("process_Load").innerHTML = 100 + "%";
							//window.location.replace("/lobby.vanity.php");
						return;
					}
				/* -/Loading complete :: Send to new header- */

				/* -Update each load- */
					for(i=0; i <= image_url.length; i++) {
							preload_Image[i].onload = function() {
								progress_Percent += progress;
								document.getElementById("process_Load").innerHTML = Math.round(progress_Percent) + "%";
								document.getElementById("load_Bar").style.width = Math.round(progress_Percent)*4-10 + "px";

								/* Debug info */
								document.getElementById("debug0").innerHTML = "length: " + image_url.length;
								document.getElementById("debug1").innerHTML = "progress: " + progress;
								document.getElementById("debug2").innerHTML = "Percent: " + progress_Percent;
								document.getElementById("debug3").innerHTML += "<br>image " + curImage + ": " + preload_Image[curImage].src;
								document.getElementById("debug5").innerHTML = "pre-curImage: " + curImage;
								/* /Debug info */

								curImage++; 

								/* Debug info */
								document.getElementById("debug6").innerHTML = "post-curImage: " + curImage;
								/* /Debug info */

							}
					}
				/* -/Update each load- */

				/* -Repeat this.function()- */
					var timer = setTimeout(function(){check_Load();},10); 
				/* -/Repeat this.function()- */
			}
		/* /Check Loading Progress */
	}
	/* /Preload Script */
	</script>    

	<style type="text/css">
			#load_Box {
				font-size: 20px; 
				font-weight: 900; 
				color: white;
				position: absolute; 
				top: 50%; 
				left: 50%;
				margin-left: -260px;
				margin-top: -150px;
				padding: 5px;
				width: 400px; 
				height: 55px;
				text-align: center;
				background-image: url('/subVanity/VanityPics/loadBg.png');
				background-repeat: no-repeat;
			}
			a:hover {
				text-decoration: none; 
				color: white; 
				text-shadow: -1px -1px #424242;  
				cursor: pointer;
			}
	</style>
</head>

<body style="background-color: black;">
	<span style="padding: 5px; color: white;" id="debug0"></span>
	<span style="padding: 5px; color: white;" id="debug1"></span>
	<span style="padding: 5px; color: white;" id="debug2"></span>
	<span style="padding: 5px; color: white;" id="debug4"></span>
	<span style="padding: 5px; color: white;" id="debug5"></span>
	<span style="padding: 5px; color: white;" id="debug6"></span>
		<br>
	<span style="padding: 5px; color: white;" id="debug3"></span>
	<div id='load_Box'>
		<img id='load_Bar' style='width: 0px; height: 45px; float: left;' src='/subVanity/VanityPics/loadBar.png' alt='loading...'>
		<span style='position: absolute; left: 50%; top: 15px; margin-left: -30px;' id='process_Load'>0%</span>
		<a href='/lobby.vanity.php' style='position: absolute; top: 60px; margin-left: -60px; left: 50%;text-decoration: none; color: #424242; font-size: 15px;' >(Skip preload)</a>
	</div>
</body> 
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.