Loading...

[Porsche_maniak]

Is there way to show loading % till the index content is loading ?
If not possable in % then loading image?

Anyone ?

Porsche_maniak Reviewed by Porsche_maniak on 8th Sep 2009. Loading... Is there way to show loading % till the index content is loading ? If not possable in % then loading image? Anyone ? Rating: 5

[To0]

You're looking for a pre-loader.. It's possible, yes.

[Porsche_maniak]

Yes but i am not in flash...
php and html used.

[To0]

It would be done using HTML, not flash.

[MUS]

hmm or JS.. but why would you need a preloader... is your page that BIG ?

[To0]

So... something like this.

Javascript:

<script language="JavaScript1.2">
startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array (
"top.gif",
"p.gif",
"navi.gif",
"back.jpg",
"navi1.gif",
"naviad.gif",
"navilinkus.gif",
"navipartners.gif",
"navilinkus.gif",
"news_title.gif",
"news_bottom.gif",
"navidownload.gif",
"navi_mitte2.gif",
"navi2.gif",
"navilinkex.gif",
"navipoll.gif",
"naviad2.gif",
"staffadmin.gif",
"naviserver.gif",
"navicounter.gif",
"bottom.gif",
"usawarez.gif"
) // Fill this array with the images you wish to preload
var locationAfterPreload = "http://usawarez.com" // 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 = 12 // The height of the gradient/preload bar
var backgroundOfGradient = "#bbbbbb" // 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] = "4" 
startingColor[1] = "4"
startingColor[2] = "7"

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

// FOR TROUBLESHOOTING:
var gap = 7 // 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>
<center>
<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
    document.write('<td bordercolorlight="000000" bordercolordark="000000" width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p>')
loadImages();
// end hiding -->
</script>
<em>Preloading images for maximum quality, please wait...</em></center>

Or..

<html>

<head>

<title>Preload Image Page</title>

<script language="JavaScript1.1">

// You may modify the following:

    var locationAfterPreload = "yoururlhere.html" // URL of the page after preload finishes

    var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)

    var heightOfPreloadBar = 15 // Height of preload bar (in pixels)

    // Put the URLs of images that you want to preload below (as many as you want)

    var yourImages = new Array("yoururlhere.swf")

// Do not modify anything beyond this point!

if (document.images) {

    var dots = new Array() 

    dots[0] = new Image(1,1)

dots[0].src = "black.gif" // default preloadbar color (note: You can
substitute it with your image, but it has to be 1x1 size)

    dots[1] = new Image(1,1)

    dots[1].src = "yellow.gif" // color of bar as preloading progresses (same note as above)

    var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0

    var loaded = new Array(),i,covered,timerID

    var leftOverWidth = lengthOfPreloadBar%coverage

}

function loadImages() { 

    for (i = 0; i < yourImages.length; i++) { 

        preImages[i] = new Image()

        preImages[i].src = yourImages[i]

    }

    for (i = 0; i < preImages.length; i++) { 

        loaded[i] = false

    }

    checkLoad()

}

function checkLoad() {

    if (currCount == preImages.length) { 

        location.replace(locationAfterPreload)

        return

    }

    for (i = 0; i <= preImages.length; i++) {

        if (loaded[i] == false && preImages[i].complete) {

            loaded[i] = true

            eval("document.img" + currCount + ".src=dots[1].src")

            currCount++

        }

    }

    timerID = setTimeout("checkLoad()",10) 

}

// end hiding -->

</script>

</head>

<BODY ="(MB=(DefaultMasterBorder, 0, 117, 0, 33),
L=(websiteloadingLayout, 697, 438))" BGCOLOR="#000000"
BACKGROUND="../assets/images/Untitled-2.jpg" TEXT="#FFFFFF"
LINK="#0033CC" VLINK="#990099" ALINK="#FF0000" TOPMARGIN=0 LEFTMARGIN=0
MARGINWIDTH=0 MARGINHEIGHT=0>

<center>

<font size="4">Please be patient while some images<br>

are being preloaded...</font><p>

0%

<script language="JavaScript1.1">

<!-- begin hiding

// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading

// for some reason, or his browser doesn't support JavaScript image object.

if (document.images) {

    var preloadBar = ''

    for (i = 0; i < yourImages.length-1; i++) {

preloadBar += '<img src="' + dots[0].src + '" width="' + coverage +
'" height="' + heightOfPreloadBar + '" name="img' + i + '"
align="absmiddle">'

    }

preloadBar += '<img src="' + dots[0].src + '" width="' +
(leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '"
name="img' + (yourImages.length-1) + '" align="absmiddle">'

    document.write(preloadBar)

    loadImages()

}

document.write('<p><small><a href="javascript:window.location=locationAfterPrel  oad">Skip Preloading</a></small></p>')

// end hiding -->

</script>

</center>

</body>

</html>

[MUS]

OOO Origin was about to post that

[Porsche_maniak]

Thanks ! I will try it tomorrow.
Now i am going to sleep.
Bye.

[MUS]

with progress bar:

<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">

// You may modify the following:
    var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
    var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as you want)
    var yourImages = new Array("http://yourdomain.com/test1.gif","http://yourdomain.com/test2.gif")

// Do not modify anything beyond this point!
if (document.images) {
    var dots = new Array() 
    dots[0] = new Image(1,1)
    dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
    dots[1] = new Image(1,1)
    dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
    var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
    var loaded = new Array(),i,covered,timerID
    var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
    for (i = 0; i < yourImages.length; i++) { 
        preImages[i] = new Image()
        preImages[i].src = yourImages[i]
    }
    for (i = 0; i < preImages.length; i++) { 
        loaded[i] = false
    }
    checkLoad()
}
function checkLoad() {
    if (currCount == preImages.length) { 
        location.replace(locationAfterPreload)
        return
    }
    for (i = 0; i <= preImages.length; i++) {
        if (loaded[i] == false && preImages[i].complete) {
            loaded[i] = true
            eval("document.img" + currCount + ".src=dots[1].src")
            currCount++
        }
    }
    timerID = setTimeout("checkLoad()",10) 
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
    var preloadBar = ''
    for (i = 0; i < yourImages.length-1; i++) {
        preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
    }
    preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
    document.write(preloadBar)
    loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

[Mr Happy]

If it's because your site maxneeds.netii.net is taking ages to load get off that crap free hosting before they kick you off for having warez.
Seriously, go to the Hosting Area and get a week's free trial hosting off someone and you'll see the difference. You won't need any loading bar.

Also if you go to maxneeds.netii.net your redirected to maxneeds.netii.net/downloads/
what are you using to redirect. If it's html or javascript use htaccess instead as it's a lot faster.