Avatar billede hepogica Nybegynder
13. december 2002 - 12:40 Der er 5 kommentarer

Grafisk Preloader UDEN flash

Hejsa ...
Har lavet en side hvor man kan åbne et popupvindue til chatlogin.
Jeg skal bruge en preloader, der grafisk viser loading tiden, mens den loader chat og chatlogin. Der er ingen FLASH på siden. Så kan ikke bruge en flash løsning, men noget der virker med javascript.
Scriptet skal redirecte til filen index.asp
nogen der kan hjælpe?
Avatar billede fun22 Nybegynder
13. december 2002 - 13:04 #1
<html>
<head>
<script language="JavaScript1.2">
<!-- begin hiding
// (C) 2000 Marcin P Wojtowicz [one_spook@hotmail.com]. All rights reserved.
// Obtain permission before selling/redistributing in any medium.

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

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("Menu_image/ADRESRED.jpg","Menu_image/IDEOGPROFIL.jpg","Menu_image/KONTAKT.jpg","Menu_image/PENGEAUTO.jpg","Menu_image/PRODUKRED.jpg","Menu_image/VIRKSOMHED.jpg","Menu_image/ADRESSER.jpg","Menu_image/IDEOGRED.jpg","Menu_image/KONTRED.jpg","Menu_image/PENGEAUTOMAT.jpg","Menu_image/PRODUKTER.jpg","Menu_image/VIRKSOMRED.jpg","Menu_image/HOMEBANKING.jpg","Menu_image/HOMEBANKING.jpg","Menu_image/NYHEDER.jpg","Menu_image/PRESSE.jpg","Menu_image/SPARBANKVEST.jpg","Menu_image/HOMERED.jpg","Menu_image/investred.jpg","Menu_image/NYHEDRED.jpg","Menu_image/PRESSRED.jpg","Menu_image/SPARRED.jpg") // Fill this array with the images you wish to preload
var locationAfterPreload = "forsiden.asp" // 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>

<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('</tr></table>');

loadImages();
// end hiding -->
</script>
</center>
</font>

</body>
</html>

Denne kode henter alle de billeder du angiver, og viser hvor langt den er kommet med en progress bar
Avatar billede sthen Nybegynder
13. december 2002 - 13:13 #2
Så lykkedes det endelig at finde den JEG ledte efter:

http://dynamicdrive.com/dynamicindex4/preloadit.htm
Avatar billede sthen Nybegynder
13. december 2002 - 13:14 #3
Har selv tidligere benyttet ovenstående, og jeg synes at den er rigtig god og flot.
Avatar billede fun22 Nybegynder
13. december 2002 - 13:16 #4
jeg tror det er den samme som min... Den minder i hvært fald meget om den.
Avatar billede fun22 Nybegynder
13. december 2002 - 13:16 #5
Lige et svar fra mig
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester