1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Preloader - Hintergrundbilder auf der Seite soll nicht mitgeladen werden...

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von tobm_knows_best, 29. April 2012.

  1. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    Guten Morgen,

    ich habe hier ein Script, welches mir sämtliche Bilder auf einer website recht schnieke lädt:

    HTML:
    1. <script type="text/javascript">
    2.         $(function () {
    3.             $('picture_shadow_angebot').hide();//hide all the images on the page
    4.         });
    5.        
    6.         var i = 0;//initialize
    7.         var int=0;//Internet Explorer Fix
    8.         $(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
    9.             var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
    10.         });
    11.  
    12.         function doThis() {
    13.             var imgs = $('img').length;//count the number of images on the page
    14.             if (i >= imgs) {// Loop the images
    15.                 clearInterval(int);//When it reaches the last image the loop ends
    16.             }
    17.             $('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
    18.             i++;//add 1 to the count
    19.         }
    20.     </script>
    Ich habe gelesen, dass ich diesem Bereich hier meine *Bilderklasse* verpassen soll, damit nur entsprechende Bilder geladen werden.
    HTML:
    1. $('picture_shadow_angebot').hide();//hide all the images on the page
    2.         });
    Also jedes Bild mit der Klasse: "picture_shadow_angebot" sollte mit dem Preloader interagieren. Dummerweise habe ich aber auch ein Hintergrundbild, welches sich mit dem Fenster mitskaliert. Jedesmal wenn ich dann die Seite öffne wird das Hintergrundbild erst mal richtig hässlich gekachelt dargestellt - und danach wird das richtige "eingefadet" (obwohl ich diesem nicht diese Klasse verpasst habe...)

    Weiss jemand woran das liegt?

    Gruß
  2. SpiceLab

    SpiceLab ZENmechanic

    Ist Preloader gesucht... hier noch immer der Ausgangspunkt des verwendeten Preloaders, oder hast du zwischenzeitlich komplett umgesattelt?

    Ein Link zum Problemfall ist hier grundsätzlich immer willkommen, um als Außenstehender ein Bild von der Situation gewinnen, und anhand des Live-Demos auch direkt den vollständigen Quellcode überfliegen zu können.
    Zuletzt bearbeitet: 29. April 2012
  3. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    Nein - wir sind hier bei einem Anderen :) Thema mit dem alten Preloader ist ja erfolgreich abgeschlossen ;)

    Siehe hier: http://swat.pts-agency.eu/angebot.html
  4. SpiceLab

    SpiceLab ZENmechanic

    Im CSS findet sich dazu dieses:

    Code (CSS):
    1.  
    2. body {
    3. ...
    4. background-repeat: repeat;
    5. ...
    6. }
  5. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    ähm..ja - das ist richtig... :D

    Mir geht´s eigentlich mehr um diesen Preloader der sich auch auf den Hintergrund auswirkt...
  6. SpiceLab

    SpiceLab ZENmechanic

    Das window-Objekt (= Browser-Anzeigefenster) bezieht das vollständige Dokument ein - und somit auch dessen Seitenhintergrund(bild).
  7. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    Hmm... schade - ich gehe mal davon aus dass dann wohl war mit meinem Vorhaben. Oder gibt´s eine Möglichkeit zu selektieren... ?
  8. SpiceLab

    SpiceLab ZENmechanic

    Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:
    Code (Javascript):
    1.  
    2. $(#div_main).bind("load", function( {
    3.  
  9. SpiceLab

    SpiceLab ZENmechanic

    Falls noch nicht bemerkt, von dem "Hintergrundbild" existiert neben der CSS-Regel background-image für <body> zudem auch ein <img>-Duplikat, das ohne seine spezielle CSS-Formatierung kein "Hintergrundbild" darstellen würde:

    ... und der derzeitige Selektor in der Fade-Funktion doThis() bezieht nunmal alle enthaltenen <img>-Elemente der Seite ein - auch jene ohne die erwähnte "Bilder-Klasse" .picture_shadow_angebot.

    Daraus folgt diese Script-Fassung:
    Code (Javascript):
    1.  
    2.         $(function () {
    3.             $('.picture_shadow_angebot').hide();//hide all the images on the page
    4.         });
    5.        
    6.         var i = 0;//initialize
    7.         var int=0;//Internet Explorer Fix
    8.         $(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
    9.             var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
    10.         });
    11.  
    12.         function doThis() {
    13.             var imgs = $('.picture_shadow_angebot').length;//count the number of images on the page
    14.             if (i >= imgs) {// Loop the images
    15.                 clearInterval(int);//When it reaches the last image the loop ends
    16.             }
    17.             $('.picture_shadow_angebot:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
    18.             i++;//add 1 to the count
    19.         }
    Naja, und wie jQuery (Bibliothek + Scripts) im Dokumentheader korrekt eingebunden wird, habe ich dir in den letzten Themen wohl hinlänglich erläutert :rolleyes:
    Zuletzt bearbeitet: 29. April 2012
    dreifragezeichen sagt Danke.
  10. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    Also hier wird mir ein Syntax-Fehler angezeigt...

    Deiner Aussage nach nehme ich an es ist also nicht machbar, es sei denn ich nehme das im Body-Tag definierte Hintergrundbild raus - richtig?

    Bzgl. der Headerstruktur - Das ist mir auch schon aufgefallen, und ich bin dran ;) Wenn ich richtig liege, dann lädt er wohl nur folgende:

    HTML:
    1. <script type="text/javascript" src="js/jquery.js"></script>
    Merci nochmal :)
  11. SpiceLab

    SpiceLab ZENmechanic

    Klar, ich hatte auf die Schnelle im Selektor die umschließenden Anführungszeichen vergessen.


    Meinen letzten Post hast du offensichtlich nicht aufmerksam gelesen, denn es ist sehr wohl machbar ;-)

    Das ist meine funktionstüchtige Testseite:

    Code (HTML5):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <link rel="shortcut icon" href="/favicon.ico" />
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. <title>PTS-Agency | SWAT Events</title>
    6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    7. <link rel="stylesheet" href="http://swat.pts-agency.eu/preloader.css" type="text/css" />
    8. <script type="text/javascript">
    9.         $(function () {
    10.             $('.picture_shadow_angebot').hide();//hide all the images on the page
    11.         });
    12.        
    13.         var i = 0;//initialize
    14.         var int=0;//Internet Explorer Fix
    15.         $(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
    16.             var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
    17.         });
    18.  
    19.         function doThis() {
    20.             var imgs = $('.picture_shadow_angebot').length;//count the number of images on the page
    21.             if (i >= imgs) {// Loop the images
    22.                 clearInterval(int);//When it reaches the last image the loop ends
    23.             }
    24.             $('.picture_shadow_angebot:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
    25.             i++;//add 1 to the count
    26.         }
    27. <script src='http://swat.pts-agency.eu/js/jquery.color-RGBa-patch.js'></script>
    28. <script src='http://swat.pts-agency.eu/js/example.js'></script>
    29. <script type="text/javascript" src="http://swat.pts-agency.eu/js/slimbox2.js"></script>
    30. <link rel='stylesheet' href='http://swat.pts-agency.eu/css/navi.css'>
    31. <link href="http://swat.pts-agency.eu/css/pts_agency.css" rel="stylesheet" type="text/css" />
    32. <link rel="stylesheet" href="http://swat.pts-agency.eu/css/slimbox2.css" type="text/css" media="screen" />
    33. <style type="text/css">
    34. body {
    35. margin-left: 0px;
    36. margin-top: 0px;
    37. margin-right: 0px;
    38. margin-bottom: 0px;
    39. background-image: url(images/bg_site.jpg);
    40. background-repeat: repeat;
    41. font-family: Arial, Helvetica, sans-serif;
    42. font-size: 12px;
    43. line-height: normal;
    44. }
    45. h1,h2,h3,h4,h5,h6 {
    46. font-weight: bold;
    47. text-shadow: 0px 0px 3px black;
    48. }
    49. h1 {
    50. font-size: 16px;
    51. color: #FFF;
    52. }
    53. h2 {
    54. font-size: 14px;
    55. color: #FFF;
    56. }
    57. h3 {
    58. font-size: 16px;
    59. color: #CCC;
    60. }
    61. h4 {
    62. font-size: 14px;
    63. color: #CCC;
    64. }
    65. h5 {
    66. font-size: 16px;
    67. color: #0099cc;
    68. }
    69. h6 {
    70. font-size: 14px;
    71. color: #0099cc;
    72. }
    73. a:link {
    74. color: #0099cc;
    75. }
    76. a:active {
    77. color: #FFF;
    78. }
    79. a:hover {
    80. color: #FFF;
    81. }
    82. <script type="text/javascript">
    83. function MM_preloadImages() { //v3.0
    84. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    85. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    86. if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    87. }
    88. <meta name="Description" content="Eventgestalter für Special Weapons &amp; Tactics (S.W.A.T.) - Raus aus dem Alltag, und rein ins Equipment eines SWAT-Officers, und erleben Sie Action, Spannung und Spaß, Teamwork bei Geiselbefreiungen und Hausdurchsuchungen mit Festnahmen, werden Sie in eine Welt eintauchen lassen, wie Sie sie nur aus Filmen kennen..." />
    89. <meta name="Keywords" content="SWAT, swat, Event, event, swat-
    90. training, SWAT-Training, pts-agency, SWAT-Officer, PTS-Agency, pts agency, pts, PTS, " />
    91. </head>
    92. <body link="#0099cc" alink="white">
    93. <img id="background-img" class="hintergrundbild" src="http://swat.pts-agency.eu/images/bg_site.jpg" alt="" />
    94. <div class="div_logo" id="div_logo"></div>
    95. <div class="nav-wrap">
    96. <ul class="group" id="example-one">
    97. <li><a href="Index.html">Start</a></li>
    98. <li><a href="ueber_uns.html">Über uns</a></li>
    99. <li><a href="geschichte.html">Geschichte</a></li>
    100. <li class="current_page_item"><a href="#">Angebote</a></li>
    101. <li><a href="info.html">Info</a></li>
    102. <li><a href="kontakt.html">Kontakt</a></li>
    103. <li><a href="impressum.html">Impressum</a></li>
    104. </ul>
    105. </div>
    106. <div class="div_main" id="div_main">
    107. <div class="div_offer_regular" id="div_offer_regular">
    108. <h5><div class="image-holder" id="image-holder"><img src="http://swat.pts-agency.eu/images/angebot_1.png" alt="angebot1" width="350" height="200" class="picture_shadow_angebot"/></div></h5>
    109. <h5>3 Stunden SWAT-Training</h5>
    110. <p>&nbsp;</p>
    111. <p>Hier wird die Zeit für Sie wie im Flug vergehen. Nach dem Anlegen der Ausrüstung erwartet Sie eine kurze Sicherheitsunterweisung. <br />
    112.   <br />
    113.   Sie erlernen den <strong>Umgang mit Kurzwaffen</strong> und werden einen Überblick erhalten, der Ihnen das Meistern eines Geiselnahme-Szenarios ermöglicht.<br />
    114. *</p>
    115. Wir trainieren mit Ihnen das <strong>Vorgehen einer SWAT-Gruppe</strong> in üblicher Gruppentaktik und schulen Sie in <strong>verschiedenen Nahkampftechniken</strong>, sodass Sie das Ihnen vorgegebene Szenario auch bewältigen werden. <br />
    116. <br />
    117. Bei Schießübungen mit Markierungswaffen vermitteln wir Ihnen einen Einblick in die jeweilige Waffengattung.<br />
    118. <div class="div_zusatzinfo_angebote" id="div_zusatzinfo_angebote">» weitere Informationen zum allgemeinen Ablauf finden sie <a href="info.html">hier</a>  </div>
    119. </div>
    120. <p>&nbsp;</p>
    121. <p>&nbsp;</p>
    122. <div class="div_offer_xxl" id="div_offer_xxl">
    123. <p><div class="image-holder" id="image-holder"><img src="http://swat.pts-agency.eu/images/angebot_2.png" width="350" height="200" class="picture_shadow_angebot" /></div></p>
    124. <h5>6 Stunden SWAT-Training   </h5>
    125. <h5>&nbsp;</h5>
    126. <p>Hier werden Sie detailliert in die SWAT-Welt eingeführt. Neben <strong>Gruppentaktiken</strong> mit <strong>Hindernisüberwindungen</strong> und der entsprechend zügigen Vorgehensweise beim <strong>Stürmen eines Hauses</strong> werden auch gezielte <strong>Nahkampf- und Selbstverteidigungstechniken</strong> vermittelt.<br />
    127.   <br />
    128. </p>
    129. Die spezielle Vorgehensweise in der Gruppe, das <strong>»Erobern«</strong> einer Treppe, welche vom Feind verteidigt wird, sowie das richtige Vorgehen bei <strong>Verhaftungen mit Handschellen</strong> werden explizit trainiert. <br />
    130. <br />
    131. <strong>Hausdurchsuchungen, »Aufbrechen« von Türen und »Geiselnahmen«</strong> werden der Abschluss eines actionreichen Tages sein. Mit Sicherheit ein unvergessliches Erlebnis!
    132. <div class="div_zusatzinfo_angebote" id="div_zusatzinfo_angebote">» weitere Informationen zum allgemeinen Ablauf finden sie <a href="info.html">hier</a>  </div>
    133. </div>
    134. <div class="div_offer_usa" id="div_offer_usa">
    135. <p><div class="image-holder" id="image-holder"><img src="http://swat.pts-agency.eu/images/angebot_3.png" width="350" height="200" class="picture_shadow_angebot" /></div></p>
    136. <h5>5 Tage SWAT-Training in den USA</h5>
    137. <h5>&nbsp;</h5>
    138. <p>Der Schwerpunkt des <strong>»5 Tage original SWAT-Training«</strong> Kurses in den USA, Jacksonville, Florida, <em>(ab dem 21. Lebensjahr)</em> liegt in der sicheren‚ präzisen und professionellen Handhabung von Kurz- und Langwaffen, um grundlegende Schießfertigkeiten in der Bewegung zu entwickeln, und zu optimieren. Das Trainieren von Festnahmen mit Handschellen und Griff- bzw. Stoßtechniken <em>(angewandt an realen »Gegnern«)</em>, werden Sie mit Sicherheit fordern.<br />
    139.   <br />
    140. </p>
    141. <p><br />
    142.   <strong>Taser-, Messer-Training, Raumdurchsuchungen</strong> und das entsprechen, dynamische Eintreten, werden Ihre körperliche Fitness beanspruchen. <strong>Taktisches Vorgehen‚ Geiselbefreiung</strong> nach »SWAT-Art«, und eine abschließende Prüfung, werden Sie physisch wie psychisch herausfordern. Eine Auszeichnung dieser Art ist außergewöhnlich, und bei aktiven SWAT-Einheiten, weltweit sehr hoch angesehen. Nach diesem Kurs werden Sie verstehen weshalb...<br />
    143.   <br />
    144. </p>
    145. <p>Wir bereiten die Teilnehmer des <strong>»5 Tage original SWAT-Training«</strong> zusätzlich für 20 Tage hier in Deutschland vor. (<em>6-Stunden-Trainingstag)</em> – d.h., dieses Paket beinhaltet 25 Tage Ausbildung - 20 Tage in Deutschland und 5 Tage in den USA, um den anschließenden Abschlusstest erfolgreich zu absolvieren. Die Trainingstage in Deutschland richten sich nach den Wünschen der Teilnehmer und können auch an Wochenenden stattfinden.<br />
    146.   <br />
    147. </p>
    148. <p>Für das SWAT Training in den Vereinigten Staaten ist als Zugangsbedingung der Nachweis eines erfolgreich absolvierten Sporttests, zur Bestätigung der körperlichen Fitness, zu erbringen. Nach Einreichen der Anmeldung<em> (inkl. Nachweis des erfolgreich absolvierten Sporttests)</em> werden dem Interessenten die Trainingsinhalte mitgeteilt.<br />
    149. </p>
    150. <div>
    151.   <div> </div>
    152. </div>
    153. <div class="div_zusatzinfo_angebote" id="div_zusatzinfo_angebote2">» weitere Informationen zum allgemeinen Ablauf finden sie <a href="info.html">hier</a>. Bei Interesse können Sie uns gerne <a href="kontakt.html">kontaktieren</a>. </div>
    154. </div>
    155. <div class="div_footer_pic" id="div_footer_pic"></div></div>
    156. <div class="div_footer_navi" id="div_footer_navi">
    157. <ul id="navlist">
    158. <li>© 2012 by Klaus Taugs</li>
    159. <li>|</li>
    160. <li>Darstellung optimiert für Mozilla Firefox</li>
    161. <li>|</li>
    162. <li>Bidschirmauflösung 1280 x 1024</li>
    163. <li>|</li>
    164. <li><a href="mailto:info@pts-agency.eu">info@pts-agency.eu</a></li>
    165. <li>|</li>
    166. <li><a href="www.pts-agency.eu">www.pts-agency.eu</a></li>
    167. </ul>
    168. </div>
    169. </div>
    170. <script type="text/javascript">
    171.  
    172.   var _gaq = _gaq || [];
    173.   _gaq.push(['_setAccount', 'UA-30699502-1']);
    174.   _gaq.push(['_trackPageview']);
    175.  
    176.   (function() {
    177.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    178.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    179.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    180.   })();
    181.  
    182. </body>
    183. </html>
    184.  
    Zuletzt bearbeitet: 29. April 2012
  12. tobm_knows_best

    tobm_knows_best Erfahrenes Mitglied

    OK - also du hast entsprechende Änderungen vorgenommen wenn ich richtig liege, bitte korrigiere mich, denn ich hoffe deine vorletzten Post richtig gedeutet zu haben:

    1. jQuery Script-Bibliothek Verweis wurde aktualisiert
    2. alle anderen jQuery Verweise entfernt
    3. Repeat-Option für den Hintergrund wurde entfernt
    4. Script für das PreLoaden der einzelnen Elemente wurde angepasst

    Zu Punkt 4 muss ich aber noch fragen, warum denn jetzt kein verweis mehr auf die Klasse "image-holder" besteht - Hast du diese aus dem CSS entfernt?

    Eigentlich wäre diese ja dann überflüssig... Richtig?
    Zuletzt bearbeitet: 29. April 2012
  13. SpiceLab

    SpiceLab ZENmechanic

    Die Klasse .image-holder war noch nie Bestandteil deines gezeigten jQuery-Scripts, und meine Empfehlung bzgl. #div_main war lediglich als möglicher Lösungsvorschlag / Workaround zu verstehen.

    Mit meiner detaillierten Erläuterung ob der Zusammenhänge in Post #9 ergab sich letztlich aber die abgewandelte Fassung deines eingangs gezeigten Scripts.
    Zuletzt bearbeitet: 29. April 2012

Diese Seite empfehlen