Need to show pecentage on this preload script

Ryanvdm · June 27th, 2011, 10:40 AM

Hi.

I need to modify this image preload script to show the progress of the preload as a percentage value and not just a progress bar.

I dont have much experience with JS. The script does display the percentage in the status bar but i need it to display within the HTML.

Any help will be appreciated.

Code:

 
<html>
<head>
<script language="JavaScript1.2">
<!-- begin hiding

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1893115054.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg") // Fill this array with the images you wish to preload
var locationAfterPreload = "http://www.yahoo.com.com/script/script2/preloadimage2.shtml" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 15 // The height of the gradient/preload bar
var backgroundOfGradient = "#000000" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "c" 
startingColor[1] = "f"
startingColor[2] = "f"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "c"
endingColor[1] = "0"
endingColor[2] = "0"

// FOR TROUBLESHOOTING:
var gap = 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!


// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
    startingColor[i] = startingColor[i].toLowerCase();
    endingColor[i] = endingColor[i].toLowerCase();
    startingColor[i] = eval(startingColor[i]);
    endingColor[i] = eval(endingColor[i]);
    diff[i] = (endingColor[i]-startingColor[i])/num;
    ones[i] = Math.floor(diff[i]);
    sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
    hilite[i] = "#";
    while (j < 3) {
        hilite[i] += convert[startingColor[j]];
        hilite[i] += convert[endingColor[j]];
        startingColor[j] += ones[j];
        endingColor[j] += sixteens[j];
        if (endingColor[j] > 15) {
            endingColor[j] -= 15;
            startingColor[j]++;
        }
        j++;
    }
    j = 0;
    i++;
}
function loadImages() {
    for (i = 0; i < imgLen; i++) {
        preImages[i] = new Image();
        preImages[i].src = yourImages[i];
        loaded[i] = 0;
        cover[i] = Math.floor(num/imgLen)*(i+1)
    }
    cover[cover.length-1] += num%imgLen
    checkLoad();
}
function checkLoad() {
    if (pending) { changeto(); return }
    if (currCount == imgLen) { location.replace(locationAfterPreload); return }
    for (i = 0; i < imgLen; i++) {
        if (!loaded[i] && preImages[i].complete) {
            loaded[i] = 1; pending++; currCount++;
            checkLoad();
            return;
        }
    }
    setTimeout("checkLoad()",10);
}
function changeto() {
    if (h+1 > cover[currCount-1]) {
        var percent = Math.round(100/imgLen)*currCount;
        if (percent > 100) while (percent != 100) percent--;
        if (currCount == imgLen && percent < 100) percent = 100;
        defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
        pending--;
        checkLoad();
        return;
    }
    eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
    h++;
    setTimeout("changeto()",1);
}
defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
// end hiding -->

</script>
</head>
<body>
<center>
<font face="Verdana, Arial, Helvetica" size="2"><center>Preloading Images... Please Wait..</center>
<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
    document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('<td bgcolor=white>'+ defaultStatus + '</td></tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://GoSomeWhere.com">GoSomeWhere</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</center>
</body>
</html>

Imar · June 27th, 2011, 10:48 AM

It could be me, but I don't see how this writes to the status bar. I can see code being "written" to an HTML table element....

Imar

Ryanvdm · June 27th, 2011, 11:12 AM

Hi Imar

Thanks for your reply. I also battled to figure it out but if you run the script above in IE you will see it.

Here is a link to a screen capture: http://i401.photobucket.com/albums/p...07/preload.jpg

Imar · June 27th, 2011, 03:28 PM

Ah, I see now. The "defaultStatus" assignment is what writes to the status bar. You can make it work like this:

1. Add a div with an ID of Message to the code right after the opening body tag (or add delay scripts so the div is in scope by the time your code fires).

2. Replace the defaultStatus assignments with something like this:

document.getElementById('Test').innerHTML = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";

Hope this helps,

Imar

Ryanvdm · June 28th, 2011, 05:45 AM

Hi Imar

thanks a stack for your help. I got it working based on your suggestion.

here it is:

Code:

<html>
<head>
<script language="JavaScript1.2">
<!-- begin hiding

startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1893115054.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg") // Fill this array with the images you wish to preload
var locationAfterPreload = "#" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 15 // The height of the gradient/preload bar
var backgroundOfGradient = "#000000" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "c" 
startingColor[1] = "f"
startingColor[2] = "f"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "c"
endingColor[1] = "0"
endingColor[2] = "0"

// FOR TROUBLESHOOTING:
var gap = 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!


// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
    startingColor[i] = startingColor[i].toLowerCase();
    endingColor[i] = endingColor[i].toLowerCase();
    startingColor[i] = eval(startingColor[i]);
    endingColor[i] = eval(endingColor[i]);
    diff[i] = (endingColor[i]-startingColor[i])/num;
    ones[i] = Math.floor(diff[i]);
    sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
    hilite[i] = "#";
    while (j < 3) {
        hilite[i] += convert[startingColor[j]];
        hilite[i] += convert[endingColor[j]];
        startingColor[j] += ones[j];
        endingColor[j] += sixteens[j];
        if (endingColor[j] > 15) {
            endingColor[j] -= 15;
            startingColor[j]++;
        }
        j++;
    }
    j = 0;
    i++;
}
function loadImages() {
    for (i = 0; i < imgLen; i++) {
        preImages[i] = new Image();
        preImages[i].src = yourImages[i];
        loaded[i] = 0;
        cover[i] = Math.floor(num/imgLen)*(i+1)
    }
    cover[cover.length-1] += num%imgLen
    checkLoad();
}
function checkLoad() {
    if (pending) { changeto(); return }
    if (currCount == imgLen) { location.replace(locationAfterPreload); return }
    for (i = 0; i < imgLen; i++) {
        if (!loaded[i] && preImages[i].complete) {
            loaded[i] = 1; pending++; currCount++;
            checkLoad();
            return;
        }
    }
    setTimeout("checkLoad()",10);
}
function changeto() {
    if (h+1 > cover[currCount-1]) {
        var percent = Math.round(100/imgLen)*currCount;
        if (percent > 100) while (percent != 100) percent--;
        if (currCount == imgLen && percent < 100) percent = 100;
        defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
        document.getElementById('displayPercentage').innerHTML = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
        pending--;
        checkLoad();
        return;
        
    }
    eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
    h++;
    setTimeout("changeto()",1);
    

}


// end hiding -->

</script>
</head>
<body>
<center>
<font face="Verdana, Arial, Helvetica" size="2"><center>Preloading Images... Please Wait..</center>
<script language="JavaScript1.2">

<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
    document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('<td bgcolor=white>'+ defaultStatus + '</td></tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://GoSomeWhere.com">GoSomeWhere</a></small></p></font>')
loadImages();
// end hiding -->
</script>
</center>

<div id="displayPercentage"></div>

</body>
</html>

Ryanvdm · June 28th, 2011, 06:23 AM

I have encountered a new problem

If i run the above script in a html file it runs fine, but as soon as i save the file as a .asp and sun it through a webserver is doesnt work at all. Nothing. not even the preloading of the images. Any ideas what the problem could be?

Imar · June 28th, 2011, 06:26 AM

Since this is all client side HTML / JavaScript, I see no reason why it wouldn't work. Are you sure the page is processed correctly by the server? What HTML do you see in the browser?

Imar

Ryanvdm · June 28th, 2011, 06:39 AM

Hi Imar

It seems the script is not compatible with firefox, but works in IE

I have put the script up on my server you will see what i see. http://www.8bitscreative.com/test/preloader.asp

Imar · June 28th, 2011, 07:41 AM

Yes, it works fine for me in IE but indeed not in Firefox.

You may want to install Firebug for Firefox which can help investigating the JavaScript errors that are thrown....

Cheers,

Imar