Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Pre-loader status with Status bar (not working)

Status
Not open for further replies.
burton77

burton77

Technical User
Jul 29, 2005
12
CH
In this link " (Pre-loader with Status bar) on the website, support told me that the script could be adapted to show the loading status of a *.swf file, not just a *.jpg file.

Can someone help me with the alteration of the script?
(sorry I havent included it here, but it comes up on the link anyway)
 
Sort by date Sort by votes
The HTML-code for the flash is:

<!--webbot bot="HTMLMarkup" startspan --><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" id="Decorum_redu" width="456" height="228">
<param name="movie" value="Decorum_redu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed name="Decorum_redu" src="Decorum_redu.swf" quality="high" bgcolor="#FFFFFF"
width="456" height="228"
type="application/x-shockwave-flash"
pluginspage=" </embed>
</object>
<!--webbot bot="HTMLMarkup" endspan -->

=========================================================
WHERE ABOUT DO I PUT THE PRE-LOADER CODE BELOW ON THE ABOVE SCRIPT?
=========================================================


The Pre-loader code is:
(no need to modify)

<html>
<head>
<title>Preloading images...</title>
<script language="javascript">

///////////////////////////////////////////////
// PUT ALL IMAGES IN AN ARRAY FOR PRELOADING //
///////////////////////////////////////////////
var pics = new Array("
///////////////////////////////////////////////////
// ENTER URL TO GOTO AFTER IT FINSHES PRELOADING //
///////////////////////////////////////////////////
var url = "";

////////////////////////////////////////////////////
// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING? //
////////////////////////////////////////////////////
var doConfirm = true;

////////////////////////////////////
// ALLOW USER TO SKIP PRELOADING? //
////////////////////////////////////
var canSkip = true;


////////////////////////////////////////////////////////////////////////////////////
//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//
////////////////////////////////////////////////////////////////////////////////////


var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;


function getLayer(layerID) {
if (document.getElementById)
return document.getElementById(layerID);
else if (document.all)
return document.all[layerID];
else
return null;
}


function updateBar() {
statLayer.innerHTML = "<font face="Arial" color="#FFFFFF"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
{
cPercent = percent;
barLayer.style.width = (cPercent*3) +"px";
percentLayer.innerHTML = "<font color="#ffffff"><B>" +cPercent+ "%</B></font>";
}
if (loaded == total)
{
doneMsgLayer.innerHTML = "<a href="javascript:done()"><font face="Arial" color="#ffffff" size="2"><B>Done (Click Here)</B></font></a>";
if (doConfirm && confirm("Files have finish loading, continue to next page?"))
done();
}
}

function startLoading() {
if (document.getElementById || document.all)
{
barLayer = getLayer("bar");
percentLayer = getLayer("percent");
statLayer = getLayer("stat");
doneMsgLayer = getLayer("doneMsg");
if (canSkip)
doneMsgLayer.innerHTML = "<a href="javascript:done()"><font color="#ffffff" size="2" face="Arial">Skip Pre-Loading</font></a>";
for (i=0; i<pics.length; i++)
{
imgObjs = new Image();
imgObjs.onload = imgLoaded;
imgObjs.onerror = imgFailed;
imgObjs.src = pics;
}
}
else
{

window.location.replace(url);
}
}

function done() {
parent.window.location.replace(url);
}

function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this. The program will skip this file now.");
loaded++;
updateBar();
}

function imgLoaded() {
loaded++;
if (loaded>pics.length)
return
updateBar();
}

window.onload=startLoading
</script>

</head>

<body bgcolor="#004891">
<font face="tahoma" color="#ffffff" size="4" style="padding-left: 110px;">Preloading images...</font>
<div id="bg" style="left: 50px; width: 300px; position: absolute; top: 50px; height: 20px; background-color: #dddddd"></div>
<div id="bar" style="left: 50px; width: 1px; position: absolute; top: 50px; height: 20px; background-color: #000000"></div>
<div id="percent" style="left: 180px; position: absolute; top: 50px"><font color="#ffffff"><b>0%</b></font></div><br>
<div id="stat" style="left: 370px; position: absolute; top: 50px"><font face="arial" color="#ffffff"><b>0/0</b></font></div><br>
<div id="donemsg" style="left: 140px; position: absolute; top: 90px"></div>
<br><br><br>

<!--Rest of text...-->
</body></html>
 
Upvote 0 Downvote
First of all you need to tidy up the preloader code otherwise it doesn't work: change all [tt]"[/tt] (double-quote) inside the string (" ") to [tt]'[/tt] (single-quote) in the Javascript; also change the layer ID [tt]donemsg[/tt] to [tt]doneMsg[/tt] in the HTML.

This preloader displays the percentage of (number of images loaded)/(number of images in the array). However, you cannot load SWF using this kind of method. Try yourself by adding an URL of a SWF to the array [tt]pics[/tt] in the first line of Javascript.

Create a SWF loader instead. This preloader code is merely a mimic of real preloader anyway, as it cannot monitor actual bytes loaded.

Kenneth Kawamoto
 
Upvote 0 Downvote
re: "change the layer ID donemsg to doneMsg in the HTML."

Thanks for your reply, Kenneth!

So I just need to remove the letters "ID" above and change all " inside all strings (" ") to ' (single-quote) in the template Preloader code? But where do I include the preloader script (which line) in my HTML code?

The folks at Bravenet.com said you could use their finished Preloader script for this, so are they wrong? (I think she was a novice too). Could you help me find such a SWF-preloader script and adjust my code for it please?
 
Upvote 0 Downvote
You cannot use this, or any other HTML/Javascript based preloaders for SWF. If you want to preload a SWF before it starts playing, create a preloader in Flash.

Creating a preloader is very easy and there are many tutorials. One example:
<
Kenneth Kawamoto
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

james1127
  • Locked
  • Question
Gmail's 'Advanced attachment features' not working with Adobe Flash Player
Replies
0
Views
136
james1127
james1127
TheCardMan
  • Locked
  • Question
My Flash Slideshow is not working once uploaded to my site.
Replies
0
Views
506
TheCardMan
TheCardMan
stpapadakis
  • Locked
  • Question
Problem with full screen in apk
Replies
0
Views
536
stpapadakis
stpapadakis
1DMF
  • Locked
  • Question
Pre-loader taking long time to display
Replies
0
Views
74
1DMF
1DMF
octagon64
  • Locked
  • Question
Problems with looping when going from one movieclip to another.
Replies
0
Views
114
octagon64
octagon64

Part and Inventory Search

Sponsor

Back
Top