Preloader - Hintergrundbilder auf der Seite soll nicht mitgeladen werden... @ Javascript & Ajax - tutorials.de: Tutorial, Forum, Anleitung & Hilfe

**tobm_knows_best** · 29.04.12 10:09

Guten Morgen,

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

HTML-Code:

<script type="text/javascript">
		$(function () {
			$('picture_shadow_angebot').hide();//hide all the images on the page
		});
		
		var i = 0;//initialize
		var int=0;//Internet Explorer Fix
		$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
			var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
		});

		function doThis() {
			var imgs = $('img').length;//count the number of images on the page
			if (i >= imgs) {// Loop the images
				clearInterval(int);//When it reaches the last image the loop ends
			}
			$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
			i++;//add 1 to the count
		}
	</script>

Ich habe gelesen, dass ich diesem Bereich hier meine *Bilderklasse* verpassen soll, damit nur entsprechende Bilder geladen werden.

HTML-Code:

$('picture_shadow_angebot').hide();//hide all the images on the page
		});

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ß

**spicelab** · 29.04.12 10:27

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.

**tobm_knows_best** · 29.04.12 10:31

Zitat von spicelab

Preloader gesucht... dürfte hier noch immer der Ausgangspunkt des verwendeten Preloaders sein, oder?

Ein Link zum Problemfall ist hier grundsätzlich immer willkommen, um ein Bild von der Situation gewinnen zu können.

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

**spicelab** · 29.04.12 10:39

Zitat von tobm_knows_best

[...] Jedesmal wenn ich dann die Seite öffne wird das Hintergrundbild erst mal richtig hässlich gekachelt dargestellt [...]

Weiss jemand woran das liegt?

Im CSS findet sich dazu dieses:

Code css:

body {
...
background-repeat: repeat;
...
}

**tobm_knows_best** · 29.04.12 10:49

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

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

**spicelab** · 29.04.12 10:55

Zitat von http://swat.pts-agency.eu/angebot.html

Code javascript:

1	$(window).bind("load", function( {//The load event will only fire if the entire page or document is fully loaded

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

**tobm_knows_best** · 29.04.12 11:01

Zitat von spicelab

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

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

**spicelab** · 29.04.12 11:06

Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:

Code javascript:

1	$(#div_main).bind("load", function( {

**spicelab** · 29.04.12 12:03

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:

Zitat von http://swat.pts-agency.eu/angebot.html

Code xhtml:

1 2	<body> <img id="background-img" class="hintergrundbild" src="images/bg_site.jpg" alt="" />

Code css:

img.hintergrundbild {
    min-height: 100%;        /*  Diese zwei Zeilen setzen die Regeln um den Hintergrund zu fÃ¼llen  */
    min-width: 1024px;
    width: 100%;             /*  Die Regeln, welche fÃ¼r die Skalierung sorgen  */
    height: auto;
    position: fixed;         /*  Die Positionierung  */
    top: 0;
    left: 0;
    z-index: -1;
}

... 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:

        $(function () {
            $('.picture_shadow_angebot').hide();//hide all the images on the page
        });
        
        var i = 0;//initialize
        var int=0;//Internet Explorer Fix
        $(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
            var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
        });
 
        function doThis() {
            var imgs = $('.picture_shadow_angebot').length;//count the number of images on the page
            if (i >= imgs) {// Loop the images
                clearInterval(int);//When it reaches the last image the loop ends
            }
            $('.picture_shadow_angebot:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
            i++;//add 1 to the count
        }

Naja, und wie jQuery (Bibliothek + Scripts) im Dokumentheader korrekt eingebunden wird, habe ich dir in den letzten Themen wohl hinlänglich erläutert

**tobm_knows_best** · 29.04.12 12:43

Zitat von spicelab

Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:

Code javascript:

1	$(#div_main).bind("load", function( {

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-Code:

<script type="text/javascript" src="js/jquery.js"></script>

Merci nochmal

**spicelab** · 29.04.12 12:47

Zitat von tobm_knows_best

Zitat von spicelab

Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:

Code javascript:

1	$(#div_main).bind("load", function( {

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

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 xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PTS-Agency | SWAT Events</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://swat.pts-agency.eu/preloader.css" type="text/css" />
<script type="text/javascript">
        $(function () {
            $('.picture_shadow_angebot').hide();//hide all the images on the page
        });
        
        var i = 0;//initialize
        var int=0;//Internet Explorer Fix
        $(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
            var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
        });
 
        function doThis() {
            var imgs = $('.picture_shadow_angebot').length;//count the number of images on the page
            if (i >= imgs) {// Loop the images
                clearInterval(int);//When it reaches the last image the loop ends
            }
            $('.picture_shadow_angebot:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
            i++;//add 1 to the count
        }
</script>
<script src='http://swat.pts-agency.eu/js/jquery.color-RGBa-patch.js'></script>
<script src='http://swat.pts-agency.eu/js/example.js'></script>
<script type="text/javascript" src="http://swat.pts-agency.eu/js/slimbox2.js"></script>
<link rel='stylesheet' href='http://swat.pts-agency.eu/css/navi.css'>
<link href="http://swat.pts-agency.eu/css/pts_agency.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://swat.pts-agency.eu/css/slimbox2.css" type="text/css" media="screen" />
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg_site.jpg);
background-repeat: repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
text-shadow: 0px 0px 3px black;
}
h1 {
font-size: 16px;
color: #FFF;
}
h2 {
font-size: 14px;
color: #FFF;
}
h3 {
font-size: 16px;
color: #CCC;
}
h4 {
font-size: 14px;
color: #CCC;
}
h5 {
font-size: 16px;
color: #0099cc;
}
h6 {
font-size: 14px;
color: #0099cc;
}
a:link {
color: #0099cc;
}
a:active {
color: #FFF;
}
a:hover {
color: #FFF;
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<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..." />
<meta name="Keywords" content="SWAT, swat, Event, event, swat-
training, SWAT-Training, pts-agency, SWAT-Officer, PTS-Agency, pts agency, pts, PTS, " />
</head>
<body link="#0099cc" alink="white">
<img id="background-img" class="hintergrundbild" src="http://swat.pts-agency.eu/images/bg_site.jpg" alt="" />
<div class="div_logo" id="div_logo"></div>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li><a href="Index.html">Start</a></li>
<li><a href="ueber_uns.html">Über uns</a></li>
<li><a href="geschichte.html">Geschichte</a></li>
<li class="current_page_item"><a href="#">Angebote</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div class="div_main" id="div_main">
<div class="div_offer_regular" id="div_offer_regular">
<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>
<h5>3 Stunden SWAT-Training</h5>
<p>&nbsp;</p>
<p>Hier wird die Zeit für Sie wie im Flug vergehen. Nach dem Anlegen der Ausrüstung erwartet Sie eine kurze Sicherheitsunterweisung. <br />
  <br />
  Sie erlernen den <strong>Umgang mit Kurzwaffen</strong> und werden einen Überblick erhalten, der Ihnen das Meistern eines Geiselnahme-Szenarios ermöglicht.<br />
*</p>
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 />
<br />
Bei Schießübungen mit Markierungswaffen vermitteln wir Ihnen einen Einblick in die jeweilige Waffengattung.<br />
<div class="div_zusatzinfo_angebote" id="div_zusatzinfo_angebote">» weitere Informationen zum allgemeinen Ablauf finden sie <a href="info.html">hier</a>  </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="div_offer_xxl" id="div_offer_xxl">
<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>
<h5>6 Stunden SWAT-Training   </h5>
<h5>&nbsp;</h5>
<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 />
  <br />
</p>
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 />
<br />
<strong>Hausdurchsuchungen, »Aufbrechen« von Türen und »Geiselnahmen«</strong> werden der Abschluss eines actionreichen Tages sein. Mit Sicherheit ein unvergessliches Erlebnis!
<div class="div_zusatzinfo_angebote" id="div_zusatzinfo_angebote">» weitere Informationen zum allgemeinen Ablauf finden sie <a href="info.html">hier</a>  </div>
</div>
<div class="div_offer_usa" id="div_offer_usa">
<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>
<h5>5 Tage SWAT-Training in den USA</h5>
<h5>&nbsp;</h5>
<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 />
  <br />
</p>
<p><br />
  <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 />
  <br />
</p>
<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 />
  <br />
</p>
<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 />
</p>
<div>
  <div> </div>
</div>
<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>
</div>
<div class="div_footer_pic" id="div_footer_pic"></div></div>
<div class="div_footer_navi" id="div_footer_navi">
<ul id="navlist">
<li>© 2012 by Klaus Taugs</li>
<li>|</li>
<li>Darstellung optimiert für Mozilla Firefox</li>
<li>|</li>
<li>Bidschirmauflösung 1280 x 1024</li>
<li>|</li>
<li><a href="mailto:info@pts-agency.eu">info@pts-agency.eu</a></li>
<li>|</li>
<li><a href="www.pts-agency.eu">www.pts-agency.eu</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30699502-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
</body>
</html>

**tobm_knows_best** · 29.04.12 13:13

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?

**spicelab** · 29.04.12 13:24

Zitat von tobm_knows_best

[...] bitte korrigiere mich, denn ich hoffe deine vorletzten Post richtig gedeutet zu haben:

[...]
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?

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.

tut orials.de	tut informieren	tut dir helfen	tut kooperieren
©2000-2013 tutorials.de Alle Rechte vorbehalten	» Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials » Terrashop

Themen-Optionen

Thema durchsuchen

Anzeige

Ähnliche Themen

Suchmaschinenrobots zeigen, welche Seite gefunden werden soll und welche nicht

Nach aufrufen der Seite soll Seite wieder geschlossen werden

Menu soll nicht aktualisiert werden!

HILFE! mit einem Quicklink-Select soll eine seite im anderem Frame geöffnet werden UN

Quelltext soll nicht als solcher erkannt werden

E-Mail:
Abonnieren Abbestellen