Ladevorgang anzeigen?

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

  • Ladevorgang anzeigen?

    Hallo,

    ich hab schon nen bissel gesucht, aber noch nix gescheites gefunden, weil ich auch nicht sooo der Experte bin. Also, ich suche nen Script oder ähnliches, was dem Benutzer den Ladevorgang einer Seite anzeigt, quasi als fortlaufende Leiste oder so....

    Weiss nich, wie ich das beschreiben soll. Sagt einfach bescheid, wenn ihr wisst, wie man sowas machen kann, am besten auch schon mit so einer Anzeigegrafik dabei.

    Danke schonmal

    mfg

    Basti
  • Grüße!
    Meinst du in flash oder ganz normale html/php... seiten?

    Zu ersterem dürfte es auf jeder guten tutorial seite eine anleitung dazu geben (kann bei flash leider net mehr helfen).

    Bei den normalen seiten wird doch eh bei jedem vernünftigen browser eine ladeleiste angezeigt. Eine zusätzliche im fenster oder auch der fake einer ladeleiste fand ich immer als störend. Ist überflüssig und beschleunigt das laden auch sicher nicht ;)

    Ciao ~ smallD
  • PHP-Quellcode

    1. <html>
    2. <head>
    3. <title>Preloading Images...</title>
    4. <script language="JavaScript1.2">
    5. <!-- begin hiding
    6. startingColor = new Array() // <-- Nicht ändern!
    7. endingColor = new Array() // <-- Nicht ändern!
    8. // Hier alle Bilder angeben die vorgeladen werden sollen:
    9. var yourImages = new Array("gfx/banner.gif","gfx/mainbody.gif","gfx/maintop.gif","gfx/navi.gif","gfx/navibg.gif","gfx/navitop.gif","gfx/potw.gif","gfx/quick.gif","gfx/space1.gif","gfx/space2.gif","gfx/space3.gif","gfx/space4.gif","gfx/space5.gif") // Ende Bilder
    10. var locationAfterPreload = "index.php" // Hier die Seite angeben zu der nach Vorladen weitergeleitet werden soll
    11. var preloadbarWidth = 300 // Die Länge des Vorladestatusbalkens!
    12. var preloadbarHeight = 15 // Die Höhe des Vorladestatusbalkens
    13. var backgroundOfGradient = "#E7ECFF" // Die Hintergrundfarbe des Vorladebalkens
    14. // Startfarbwert des Vorladebalkens - Es muss dabei die der erste, dritte und fünfte Wert des entsprechenden Hexadezimalcodes angegeben werden
    15. startingColor[0] = "9"
    16. startingColor[1] = "C"
    17. startingColor[2] = "C"
    18. // Endfarbwert des Vorladebalkens - Es muss dabei die der erste, dritte und fünfte Wert des entsprechenden Hexadezimalcodes angegeben werden
    19. endingColor[0] = "9"
    20. endingColor[1] = "C"
    21. endingColor[2] = "C"
    22. // BEI PROBLEMEN:
    23. var gap = 7 // BEI JAVASCRIPT ERROR mit diesem Wert experimentieren!!! 2 ist der minimale Wert!!!
    24. // AB HIER NICHTS MEHR ÄNDERN
    25. if (!document.all) location.replace(locationAfterPreload)
    26. var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
    27. var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
    28. var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
    29. var num = Math.floor(preloadbarWidth/gap);
    30. for (i = 0; i < 3; i++) {
    31. startingColor[i] = startingColor[i].toLowerCase();
    32. endingColor[i] = endingColor[i].toLowerCase();
    33. startingColor[i] = eval(startingColor[i]);
    34. endingColor[i] = eval(endingColor[i]);
    35. diff[i] = (endingColor[i]-startingColor[i])/num;
    36. ones[i] = Math.floor(diff[i]);
    37. sixteens[i] = Math.round((diff[i] - ones[i])*15);
    38. }
    39. endingColor[0] = 0;
    40. endingColor[1] = 0;
    41. endingColor[2] = 0;
    42. i = 0, j = 0;
    43. while (i <= num) {
    44. hilite[i] = "#";
    45. while (j < 3) {
    46. hilite[i] += convert[startingColor[j]];
    47. hilite[i] += convert[endingColor[j]];
    48. startingColor[j] += ones[j];
    49. endingColor[j] += sixteens[j];
    50. if (endingColor[j] > 15) {
    51. endingColor[j] -= 15;
    52. startingColor[j]++;
    53. }
    54. j++;
    55. }
    56. j = 0;
    57. i++;
    58. }
    59. function loadImages() {
    60. for (i = 0; i < imgLen; i++) {
    61. preImages[i] = new Image();
    62. preImages[i].src = yourImages[i];
    63. loaded[i] = 0;
    64. cover[i] = Math.floor(num/imgLen)*(i+1)
    65. }
    66. cover[cover.length-1] += num%imgLen
    67. checkLoad();
    68. }
    69. function checkLoad() {
    70. if (pending) { changeto(); return }
    71. if (currCount == imgLen) { location.replace(locationAfterPreload); return }
    72. for (i = 0; i < imgLen; i++) {
    73. if (!loaded[i] && preImages[i].complete) {
    74. loaded[i] = 1; pending++; currCount++;
    75. checkLoad();
    76. return;
    77. }
    78. }
    79. setTimeout("checkLoad()",10);
    80. }
    81. function changeto() {
    82. if (h+1 > cover[currCount-1]) {
    83. var percent = Math.round(100/imgLen)*currCount;
    84. if (percent > 100) while (percent != 100) percent--;
    85. if (currCount == imgLen && percent < 100) percent = 100;
    86. defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [' + percent + '%].";
    87. pending--;
    88. checkLoad();
    89. return;
    90. }
    91. eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
    92. h++;
    93. setTimeout("changeto()",1);
    94. }
    95. defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
    96. // end hiding -->
    97. </script>
    98. </head>
    99. <body bgcolor="#E7ECFF" link="#000000" vlink="#000000" alink="#000000" scroll="no">
    100. <center>
    101. <table border="0" height="100%">
    102. <tr height="100%" valign="center">
    103. <td align="center">
    104. Bilder werden vorgeladen...
    105. <script language="JavaScript1.2">
    106. <!-- beging hiding
    107. document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
    108. for (i = 0; i < num; i++) {
    109. document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
    110. }
    111. document.write('</tr></table>');
    112. document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)">Vorladen überspringen !</a></small></p></font>')
    113. loadImages();
    114. // end hiding -->
    115. </script>
    116. </td>
    117. </tr>
    118. </table>
    119. </center>
    120. </body>
    121. </html>
    Alles anzeigen


    Hier haste einen funzenden Preloader in JS,musst nur noch anpassen und einbauen und er geht wunderbar.

    n3o
    [SIZE="4"]
    Got [COLOR="DeepSkyBlue"]/[/color][COLOR="Blue"]/[/color]/M Power?
    [/SIZE]
  • Original geschrieben von smallD
    Nicht schlecht, respect :) Tutorial, schonmal selbst gescriptet oder jetzt gerade mal eben aus dem ärmel programmiert?

    Ich zweifel mal trotzdem die notwendigkeit einer solchen spielerei an :rolleyes: Meisten haben eh schon breitband und sehn so nen balken dann gar net mehr richtig^^ Und modemuser sind bestimmt froh wenn sie ohne umweg auf die seite kommen und vllt schon nen link klicken bevor die ganze seite geladen ist. Und wer zB über handy surft ist froh über jedes bild das ihm erspart bleibt (hatte so nen freund, ist also nicht weit hergeholt;) ).

    Aber wenns denn sein muss nimm das vom n3o und nichts wo vielleicht noch jpgs und gifs im ladebalken verwendet werden.

    Ciao ~ smallD


    schöne Disskussion über Ladevorgangsanzeiger, aber leider fehl am Platz, er will nen Code bzw. Tipps die bekommt er und ob ers nutzt oder nicht ist ihm überlassen ;).
  • Sollte es wirklich so ein dorn im auge sein einen 2 posting thread zum weiterdiskutieren zu verwenden, mache ich auch gerne einen neuen thread auf.
    Dachte nur es wäre unangebracht zu einem bestehenden einen zweiten aufzumachen damit man über das selbe thema redet.
    Ciao ~ smallD