Bilder vorladen/Neues Menü ausfahren

  • JavaScript

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von Agita.

    Bilder vorladen/Neues Menü ausfahren

    Hey, ich hätte zwei fragen. Gibt es die Möglichkeit als erstes auf der Seite eine Progressbar anzuzeigen die sich auffüllt, jedoch erst bei 100% ist wenn von der eigentlichen Seite alles geladen worden ist und das wenn die Progressbar 100% erreicht hat die eigentliche Seite erst angezeigt wird?

    Dann, gibt es die Möglichkeit wenn ich z.B in einer Dropdown-Textzeile etwas auswähle oder einen Link drücke das unten drunter ein aber schon vorhandener Code erst angezeigt wird. D.H sozusagen ist das Item unsichtbar und erst wenn man einen Link drückt soll es angezeigt werden?

    Mfg

    VIEL SPASS :thumbup:

    expandiere mich

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <title>xaxaxaxaxa</title>
    5. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    6. <script type="text/javascript">
    8. // http://ejohn.org/blog/flexible-javascript-events/
    9. function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event);};obj.attachEvent( "on"+type,obj[type+fn]);}}
    10. function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){obj.detachEvent("on"+type,obj[type+fn]);obj[type+fn]=null;obj["e"+type+fn]=null;}}
    12. </script>
    13. <style type="text/css">
    15. img
    16. {
    17. width : 400px;
    18. height : 300px;
    19. }
    21. body
    22. {
    23. background : url(http://www.hdwallpapersinhd.net/wp-content/uploads/2013/11/Free-Wallpaper-Pictures.jpg);
    24. }
    25. #body
    26. {
    27. background : url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/05/Free-Wallpaper-Download-For-Laptop-2013-765024.jpg);
    28. }
    30. #loading
    31. {
    32. color : #bbb;
    33. background : #fff;
    34. padding : 10px;
    35. font-size : 20px;
    36. }
    38. #hidden
    39. {
    40. /** benutze NICHT display:none **/
    41. /** denn das blockiert manchmal bestimmte events **/
    42. width : 0px;
    43. height : 0px;
    44. overflow : hidden;
    45. visibility : none;
    46. border : 0px;
    47. position : absolute;
    48. margin : 0px;
    49. }
    51. </style>
    52. </head>
    53. <body>
    55. <div id="body" style="display:none;">
    56. <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/free-hd-wallpapers-desktop-101.jpg">
    57. <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/Free-Wallpapers-1.jpg">
    58. <img src="http://www.hdwallpapersview.com/wp-content/uploads/2013/05/free-nature-backgrounds-wallpapers.jpg">
    59. </div>
    60. <div id="loading" style="display:block;"></div>
    61. <div id="hidden"></div>
    63. <script type="text/javascript">
    65. // was ist das hier?
    66. // das ist eine art container...
    67. // alles was innerhalb dessen erstellt wird bleibt drinne
    68. // und nichts kann von aussen drauf zugreifen
    69. // die variablen "OUTSIDE" und "INSIDE" zeigen was gemeint ist
    70. var OUTSIDE = "outside";
    71. (function(){
    72. // auf sachen von aussen kann man antürlich weiterhin zugreifen
    73. OUTSIDE = "inside";
    74. // ganz unten versuch ich auf folgende variable zuzugreifen
    75. var INSIDE = "inside";
    76. // das nur am rande :)
    77. // hatte langeweile xD
    79. // los gehts
    80. var BODY = document.getElementById("body");
    81. var LOADING = document.getElementById("loading");
    82. var HIDDEN = document.getElementById("hidden");
    84. // zuerst das schwerste
    85. // es gibt viele möglichkeiten aufs laden von hintergründen die
    86. // per css definiert wurde zu warten. 99% davon verlangen
    87. // frameworks wie jquery oder co... meine variante bedient sich
    88. // einem simplen, eigentlich schon seit jahrem bekannten, workaround
    89. // und zwar..
    90. // - ALLE elemente des documents durchgehen,
    91. // - deren css style ermitteln
    92. // - und background bilder in einem verstecktem div vorladen
    93. //
    94. // mit dieser var verhindere ich, dass ich das selbe bg bild mehrfach lade
    95. var preloaded = {};
    96. // ermittle ALLE elemente
    97. var docElements = document.getElementsByTagName("*");
    98. // und nun für jedes element...
    99. for (var i=0; i<docElements.length; i++)
    100. {
    101. // ermittle per css definierte styles des elements
    102. var style = window.getComputedStyle(docElements[i]);
    103. // kein bg bild? überspringen
    104. if (typeof style.backgroundImage != "string") continue;
    105. if (style.backgroundImage == "none") continue;
    106. // "url(" am anfang und ")" am ende entfernen
    107. var bgImg = style.backgroundImage.substr(5, style.backgroundImage.length - 'url("")'.length);
    108. // überspringe wenn bereits geladen
    109. if (typeof preloaded[bgImg] != "undefined") continue;
    110. // speichere als geladen
    111. preloaded[bgImg] = true;
    112. // erstelle neues img element
    113. var img = document.createElement("img");
    114. img.src = bgImg;
    115. // füge img element im versteckten div hinzu
    116. HIDDEN.appendChild(img);
    117. }
    119. // das gröbste ist geschafft
    120. // um css backgrounds müssen wir uns nicht mehr kümmern,
    121. // das geschieht automatisch
    123. // dies ist die anzahl von bildern die noch darauf warten geladen zu werden
    124. var queue = 0;
    126. // diese funktion wird aufgerufen wenn ein bild fertig ist
    127. function onload(imgSrc)
    128. {
    129. // damit man auch sieht dass etwas passiert...
    130. LOADING.innerHTML += imgSrc+"<br>";
    131. // verringere
    132. queue--;
    133. // wenn alles geladen
    134. if (queue == 0)
    135. {
    136. alert("alles geladen");
    137. // dann deaktiviere das preload-div
    138. LOADING.style.display = "none";
    139. // und aktiviere das eigentliche div
    140. BODY.style.display = "block";
    141. // zusätzlich KANN man noch folgendes machen,
    142. // das löscht das preload div aus dem document
    143. HIDDEN.parentNode.removeChild(HIDDEN);
    144. }
    145. }
    147. //
    148. // nun müssen wir aber noch alle images durchgehen und sie mit dem event kombinieren
    149. //
    151. // alle img elemente
    152. var imgs = document.getElementsByTagName("img");
    153. // für jedes davon...
    154. for (var i=0; i<imgs.length; i++)
    155. {
    156. // erhöhe warteschlange
    157. queue++;
    158. // und füge event hinzu
    159. eval(' addEvent(imgs[i], "load", function(){onload("'+imgs[i].getAttribute("src")+'");}); ');
    160. // wozu eval() ?? wegen dem src parameter das ich übergeben will, nur 'n kleiner debug
    161. }
    163. })();
    164. // und hier versuchen wir nun etwas innerhalb des containers von aussen aufzurufen
    165. // produziert einen reference error
    166. alert(INSIDE);
    168. </script>
    170. </body>
    171. </html>


    Vorschau

Facebook
Telefonspende