Loading bar ?!

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Loading bar ?!

    hi!
    ich versuch schon ganze zeit ne Loading bar zu erstellen, weiss aber net wie das geht :/

    " wenn man auf die site gehn wir, das so ne kleine loading bar erscheint, und einem zeigt wieviel % von der page schon geladen ist. "

    wenn mir einer weiterhelfen könnte, wäre das top! =)

    bye!

    xeL`
  • Evtl. könnte man dir besser weiter helfen, wenn du sagst, wie du bisher versucht hast eine Ladefortschrittsanzeige zu erstellen und vor allem mit welchem Programm bzw. mit welcher Sprache?
  • so das meinst du wohl ;):

    PHP-Quellcode

    1. // kommt in den Headbereich
    2. <script language="JavaScript1.2">
    3. startingColor = new Array() // <-- Do not modify!
    4. endingColor = new Array() // <-- Do not modify!
    5. // YOU MAY MODIFY THE FOLLOWING:
    6. var yourImages = new Array
    7. ("index/images/Capture.gif", "index/images/inordiv3.gif", "index/images/pfeil.gif", "index/images/banner.gif") // Fill this array with the images you wish to preload
    8. var locationAfterPreload = "index/main.php?show=news" // The script will redirect here when the preloading finishes *successfully*
    9. var preloadbarWidth = 280 // The length of the preload bar. Should be greater than total amount of images you want to preload!
    10. var preloadbarHeight = 7 // The height of the gradient/preload bar
    11. var backgroundOfGradient = "#FFFFFF" // Default color while the preload bar is "filling up"
    12. // Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code: 4FD
    13. startingColor[0] = "9"
    14. startingColor[1] = "A"
    15. startingColor[2] = "9"
    16. // Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
    17. endingColor[0] = "9"
    18. endingColor[1] = "A"
    19. endingColor[2] = "9"
    20. // FOR TROUBLESHOOTING:
    21. var gap = 3 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR! 2 is the minumum value!
    22. // DO NOT MODIFY ANYTHING BEYOND THIS POINT!
    23. if (!document.all) location.replace(locationAfterPreload)
    24. var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
    25. var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
    26. var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
    27. var num = Math.floor(preloadbarWidth/gap);
    28. for (i = 0; i < 3; i++) {
    29. startingColor[i] = startingColor[i].toLowerCase();
    30. endingColor[i] = endingColor[i].toLowerCase();
    31. startingColor[i] = eval(startingColor[i]);
    32. endingColor[i] = eval(endingColor[i]);
    33. diff[i] = (endingColor[i]-startingColor[i])/num;
    34. ones[i] = Math.floor(diff[i]);
    35. sixteens[i] = Math.round((diff[i] - ones[i])*15);
    36. }
    37. endingColor[0] = 0;
    38. endingColor[1] = 0;
    39. endingColor[2] = 0;
    40. i = 0, j = 0;
    41. while (i <= num) {
    42. hilite[i] = "#";
    43. while (j < 3) {
    44. hilite[i] += convert[startingColor[j]];
    45. hilite[i] += convert[endingColor[j]];
    46. startingColor[j] += ones[j];
    47. endingColor[j] += sixteens[j];
    48. if (endingColor[j] > 15) {
    49. endingColor[j] -= 15;
    50. startingColor[j]++;
    51. }
    52. j++;
    53. }
    54. j = 0;
    55. i++;
    56. }
    57. function loadImages() {
    58. for (i = 0; i < imgLen; i++) {
    59. preImages[i] = new Image();
    60. preImages[i].src = yourImages[i];
    61. loaded[i] = 0;
    62. cover[i] = Math.floor(num/imgLen)*(i+1)
    63. }
    64. cover[cover.length-1] += num%imgLen
    65. checkLoad();
    66. }
    67. function checkLoad() {
    68. if (pending) { changeto(); return }
    69. if (currCount == imgLen) { location.replace(locationAfterPreload); return }
    70. for (i = 0; i < imgLen; i++) {
    71. if (!loaded[i] && preImages[i].complete) {
    72. loaded[i] = 1; pending++; currCount++;
    73. checkLoad();
    74. return;
    75. }
    76. }
    77. setTimeout("checkLoad()",10);
    78. }
    79. function changeto() {
    80. if (h+1 > cover[currCount-1]) {
    81. var percent = Math.round(100/imgLen)*currCount;
    82. if (percent > 100) while (percent != 100) percent--;
    83. if (currCount == imgLen && percent < 100) percent = 100;
    84. defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [' + percent + '%].";
    85. pending--;
    86. checkLoad();
    87. return;
    88. }
    89. eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
    90. h++;
    91. setTimeout("changeto()",1);
    92. }
    93. defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
    94. // end hiding -->
    95. </script>
    96. //der rest kommt jetzt in den body bereich
    97. <script language="JavaScript1.2">
    98. <!-- beging hiding
    99. document.write('<table border="1" bordercolor="#404F5D" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
    100. for (i = 0; i < num; i++) {
    101. document.write('<td bordercolorlight="#404F5D" bordercolordark="75A0BD" width="' + gap + '" id="cell' + (i+1) + '"></td>');
    102. }
    103. document.write('</tr></table>');
    104. loadImages();
    105. // end hiding -->
    106. </script>
    Alles anzeigen


    Quelle: http://www.tutorials.de/
    Anwendung findet das Teil glaub hier: zirps-page.de

    Gruß Jone